es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Reaccionar Google Maps obtiene los límites de la polilínea.

29 May, 2023 Programación

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,

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para obtener los límites de la polilínea, puedes usar la clase LatLngBounds de la API google.maps. Puedes recorrer el arreglo path y extender los límites con cada punto. Una vez que tengas los límites, puedes llamar al método fitBounds en la instancia de google.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 propiedad onLoad del componente GoogleMap para obtener la instancia de google.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:

    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))
      : [];

    const onLoad = (map: google.maps.Map<element>) => {
      if (path.length > 0) {
        const bounds = new google.maps.LatLngBounds();
        path.forEach((point) => bounds.extend(point));

        map.fitBounds(bounds);
      }
    };

    return (
      <googlemap defaultzoom="{zoom}" defaultcenter="{center}" defaultoptions="{mapOptions}" onload="{onLoad}">
        <marker position="{center}"></marker>
        {path.length > 0 && (
          <polyline options="{polyLineOptions}" path="{path}" visible=""></polyline>
        )}
      </googlemap>
    );
  }),
);

    En este ejemplo, usamos la función onLoad para obtener la instancia de google.maps.Map. Creamos una nueva instancia de LatLngBounds, recorremos el arreglo path y extendemos los límites con cada punto. Una vez que tenemos los límites, llamamos al método fitBounds en la instancia de map para ajustar el zoom del mapa para que se ajuste a la polilínea dentro de los límites.

    ¡Espero que esto ayude!

Comments are closed.