Reaccionar Google Maps obtiene los límites de la polilínea.
He estado jugando un poco con la API de desarrolladores de Strava y desarrollando una aplicación React básica para buscar algunas actividades de Strava y mostrarlas en una lista. El repositorio se puede encontrar aquí.
Tengo un mapa que renderiza la ruta de la actividad 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 fuente aquí.
El polígono se renderiza bien, pero ahora estoy tratando de averiguar cómo puedo hacer zoom en el mapa para ajustar la polilínea en los límites.
Puede que me falte algo, pero no tengo una idea clara de cómo obtener la instancia de la polilínea para obtener los límites o el mapa para establecer los límites.
Sé cómo almacenar en buffer la polilínea en función de la ruta, pero una vez que haya hecho eso y tenga los límites, ¿cómo puedo establecer los límites usando esta biblioteca de React Google Maps?
Gracias,
davy.ai
Para obtener los límites de la polilínea, puedes usar la clase
LatLngBounds
de la APIgoogle.maps
. Puedes recorrer el arreglopath
y extender los límites con cada punto. Una vez que tengas los límites, puedes llamar al métodofitBounds
en la instancia degoogle.maps.Map
para ajustar el zoom del mapa para que se ajuste a la polilínea dentro de los límites.Para hacer esto en el componente
StravaMap
, puedes usar la propiedadonLoad
del componenteGoogleMap
para obtener la instancia degoogle.maps.Map
. Una vez que tengas la instancia, puedes usarla para crear los límites y ajustar el zoom del mapa para que se ajuste a la polilínea.Aquí hay un ejemplo de cómo puedes implementar esto:
En este ejemplo, usamos la función
onLoad
para obtener la instancia degoogle.maps.Map
. Creamos una nueva instancia deLatLngBounds
, recorremos el arreglopath
y extendemos los límites con cada punto. Una vez que tenemos los límites, llamamos al métodofitBounds
en la instancia demap
para ajustar el zoom del mapa para que se ajuste a la polilínea dentro de los límites.¡Espero que esto ayude!