Reagire Google Maps ottenere limiti della Polilinea

Question 1

Ho giocato in giro con la Strava sviluppatore API un po ' e stata la creazione di una base di Reagire app per recuperare alcuni Starva attività e lo visualizza in un elenco. Repo può essere trovato qui.

Ho una mappa che rende l'attività di rotta in questo 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>
    );
  }),
);

File di origine qui.

Il poligono rende bene, ma ora sto cercando di capire come posso ingrandire la mappa per adattarsi th epolyline in limiti.

I può essere combinavano soemthing ma non ho una chiara idea di come entrare in possesso della polilinea istanza per ottenere o limiti la mappa per impostare confini.

Io so come buffer di poluyline basato sul sentiero, ma una volta che ho fatto thay e hanno dei limiti, come posso impostare il limite che utilizza questo Reagire Google Maps libreria?

Grazie,

Question 2

Con un po ' più di scavo e di ricerca ho trovato una soluzione funzionante che voglio condividere per il bene degli altri:

Ho trovato questo post su GitHub

Utilizzando che ho creato una funzione di supporto per creare il 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;
};

Nel mio StravaMap componente ho poi passare il percorso abbiamo avuto per questa funzione e ottenere i limiti di simile a questo:

const bounds = createBounds(path);

Posso quindi passare al GoogleMap componente utilizzando il ref come:

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

E che imposta correttamente la mappa vincolato quando l'attività viene caricato.

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

Con un po ' più di scavo e di ricerca ho trovato una soluzione funzionante che voglio condividere per il bene degli altri:

Ho trovato questo post su GitHub

Utilizzando che ho creato una funzione di supporto per creare il 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;
};

Nel mio StravaMap componente ho poi passare il percorso abbiamo avuto per questa funzione e ottenere i limiti di simile a questo:

const bounds = createBounds(path);

Posso quindi passare al GoogleMap componente utilizzando il ref come:

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

E che imposta correttamente la mappa vincolato quando l'attività viene caricato.

Reagire Google Maps ottenere limiti della Polilinea

Domanda

Migliore risposta

In altre lingue

Questa pagina è in altre lingue

Popolare in questa categoria

Domande popolari in questa categoria