Reagowanie na mapy Google, aby uzyskać granicy polilinii

Question 1

Jestem trochę pograł z API Strava i stworzył podstawową aplikację React do pobierania aktywności soem Starva i wyświetlić je na liście. Repo można znaleźć tutaj.

Mam kartę, która wyświetla trasę aktywności w tym komponencie.

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>
    );
  }),
);

Plik źródłowy tutaj.

Poligon jest wyświetlana normalnie, ale teraz staram się zrozumieć, jak mogę powiększyć mapę, aby wpisać эполинию w granicy.

Może ja coś źle rozumiem, ale u mnie nie ma jasnego pojęcia o tym, jak uzyskać kopię polilinii, aby uzyskać granicy, lub mapę, aby ustawić granice.

Wiem, jak буферизировать полулинию na podstawie drodze, ale jak tylko zrobię to i u mnie będą granice, jak mogę ustawić granicę, za pomocą tej biblioteki map Google React?

Dziękuję

Question 2

Trochę kopanie i zbadać, znalazłem działające rozwiązanie, którym podzielę się na rzecz innych:

Znalazłem ten post na GitHub

Wykorzystując to, stworzyłem funkcję pomocniczą do tworzenia 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;
};

W moim komponencie StravaMap następnie przekazuję sposób, który mieliśmy do tej funkcji, i mam takie granice:

const bounds = createBounds(path);

Następnie mogę przekazać to składnik GoogleMap, korzystając z linku, np.:

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

I to z powodzeniem instaluje powiązanie karty podczas uruchamiania działania.

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

Trochę kopanie i zbadać, znalazłem działające rozwiązanie, którym podzielę się na rzecz innych:

Znalazłem ten post na GitHub

Wykorzystując to, stworzyłem funkcję pomocniczą do tworzenia 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;
};

W moim komponencie StravaMap następnie przekazuję sposób, który mieliśmy do tej funkcji, i mam takie granice:

const bounds = createBounds(path);

Następnie mogę przekazać to składnik GoogleMap, korzystając z linku, np.:

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

I to z powodzeniem instaluje powiązanie karty podczas uruchamiania działania.

Reagowanie na mapy Google, aby uzyskać granicy polilinii

Pytanie

Najlepsza odpowiedź

W innych językach

Ta strona jest w innych językach

Popularne w tej kategorii

Najczęściej zadawane pytania w tej kategorii