Google Haritalar'a tepki Ver Polyline sınırlarını al

Question 1

Strava geliştirici API'sı ile biraz oynuyordum ve soem Starva etkinliklerini almak ve bir listede görüntülemek için temel bir React uygulaması oluşturuyordum. Repo burada bulunabilir.

Bu bileşendeki etkinlik rotasını oluşturan bir haritam var.

const StravaMap = withScriptjs(
  withGoogleMap(({ zoom, activity }: StravaMapProps) => {
    const center = {
      lat: activity.start_latitude,
      lng: activity.start_longitude,
    };

    const path = activity.map.summary_polyline
      ? createPath(polyline.decode(activity.map.summary_polyline))
      : [];

    return (
      <GoogleMap
        defaultZoom={zoom}
        defaultCenter={center}
        defaultOptions={mapOptions}
      >
        <Marker position={center} />
        {path.length > 0 && (
          <Polyline options={polyLineOptions} path={path} visible />
        )}
      </GoogleMap>
    );
  }),
);

Kaynak dosya burada.

Çokgen iyi işliyor, ancak şimdi haritayı epolyline'ı sınırlara sığdırmak için nasıl yakınlaştırabileceğimi anlamaya çalışıyorum.

Her şeyi yanlış yapıyor olabilirim, ancak sınırları belirlemek için sınırları veya haritayı almak için polyline örneğini nasıl ele geçireceğime dair net bir fikrim yok.

Ben nasıl tampon poluyline dayalı yol, ama bir kere ben yaptım, sende ve sınırları, nasıl yapabilirim set bağlı kullanarak bu Tepki Google Maps kütüphane mi?

Teşekkürler,

Question 2

Biraz daha araştırma ve araştırma yaparak, başkalarının yararına paylaşacağım uygulanabilir bir çözüm buldum:

Bu yazıyı GitHub'da buldum

Bunu kullanarak oluşturmak için bir yardımcı işlev oluşturdum google.maps.LatLngBounds

export const createBounds = (path: IPoint[]): google.maps.LatLngBounds => {
  const bounds = new window.google.maps.LatLngBounds();
  path.map((p: IPoint) => bounds.extend(p));
  return bounds;
};

StravaMap bileşenimde daha sonra bu işleve giden yolu geçtim ve bunun gibi sınırları elde ettim:

const bounds = createBounds(path);

Daha sonra bunu ref gibi kullanarak GoogleMap bileşenine iletebilirim:

  ref={(map) => map && map.fitBounds(bounds)}

Ve bu, etkinlik yüklendiğinde eşlemeyi başarıyla ayarlar.

loan.burger · Answer 1 · 2021-11-24T05:33:14

Biraz daha araştırma ve araştırma yaparak, başkalarının yararına paylaşacağım uygulanabilir bir çözüm buldum:

Bu yazıyı GitHub'da buldum

Bunu kullanarak oluşturmak için bir yardımcı işlev oluşturdum google.maps.LatLngBounds

export const createBounds = (path: IPoint[]): google.maps.LatLngBounds => {
  const bounds = new window.google.maps.LatLngBounds();
  path.map((p: IPoint) => bounds.extend(p));
  return bounds;
};

StravaMap bileşenimde daha sonra bu işleve giden yolu geçtim ve bunun gibi sınırları elde ettim:

const bounds = createBounds(path);

Daha sonra bunu ref gibi kullanarak GoogleMap bileşenine iletebilirim:

  ref={(map) => map && map.fitBounds(bounds)}

Ve bu, etkinlik yüklendiğinde eşlemeyi başarıyla ayarlar.

Google Haritalar'a tepki Ver Polyline sınırlarını al

Soru

En iyi cevabı

Diğer dillerde

Bu sayfa diğer dillerde

Bu kategoride popüler

Popüler soruları bu kategoride