Reaccionar Google Maps obtener límites de la Polilínea

Question 1

He estado jugando con el Strava API para desarrolladores un poco y ha sido la construcción de un básico de Reaccionar de la aplicación para recuperar algunos Starva actividades y los mostrará en una lista. Repo se puede encontrar aquí.

Tengo un mapa que representa la actividad de la ruta en este componente.

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

Archivo de código fuente aquí.

El polígono hace bien, pero ahora estoy tratando de averiguar cómo puedo hacer zoom en el mapa para que se ajuste th epolyline en los límites.

Me pueden perdieron soemthing pero no tengo una idea clara de cómo conseguir el asimiento de la polilínea instancia para obtener los límites o el mapa para establecer los límites.

Sé el búfer de la poluyline basado en la ruta, pero una vez que he hecho thay y tienen los límites, ¿cómo puedo ajustar el obligado uso de esta Reaccionar de Google Maps de la biblioteca?

Gracias,

Question 2

Con un poco más de la excavación y la investigación he encontrado una solución viable voy a compartir para el beneficio de los demás:

He encontrado este post en GitHub

El uso que he creado una función de ayuda para crear el 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;
};

En mi StravaMap componente I, a continuación, pasar el camino que había para esta función y obtener los límites como esta:

const bounds = createBounds(path);

Puedo, a continuación, pasar a la GoogleMap componente mediante el ref como:

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

Y que establece correctamente el mapa obligado cuando la actividad está cargado.

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

Con un poco más de la excavación y la investigación he encontrado una solución viable voy a compartir para el beneficio de los demás:

He encontrado este post en GitHub

El uso que he creado una función de ayuda para crear el 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;
};

En mi StravaMap componente I, a continuación, pasar el camino que había para esta función y obtener los límites como esta:

const bounds = createBounds(path);

Puedo, a continuación, pasar a la GoogleMap componente mediante el ref como:

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

Y que establece correctamente el mapa obligado cuando la actividad está cargado.

Reaccionar Google Maps obtener límites de la Polilínea

Pregunta

Mejor respuesta

En otros idiomas

Esta página está en otros idiomas

Popular en esta categoría

Las preguntas más habituales en esta categoría