Reacționează Google Maps a obține limitele de Polilinie

Question 1

Am jucat în jurul cu Strava dezvoltator API un pic și construiesc o bază Reacționa app pentru a aduce la unele Starva activități și afișa într-o listă. Repo pot fi găsite aici.

Am o harta care prestează activitatea de rută în această componentă.

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

Fișierul sursă aici.

Poligonul face bine, dar acum încerc să-mi dau seama cum pot mări harta pentru a se potrivi lea epolyline în limite.

Nu poate fi mising ceva dar eu nu am o idee clară despre cum să prindă polilinie exemplu, pentru a obține limitele sau harta pentru a seta limite.

Știu cum să-tampon de poluyline bazată pe calea dar odată ce am făcut thay și limitele, cum pot seta legat folosind acest Reacționa Google Maps bibliotecă?

Multumesc,

Question 2

Cu un pic mai mult de săpat și de cercetare, am găsit o soluție viabilă voi împărtăși pentru beneficiul altora:

Am gasit acest post pe GitHub

Folosind pe care am creat-o funcția de helper pentru a crea 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;
};

În StravaMap componenta I apoi trece calea am avut pentru această funcție și pentru a obține limitele de genul asta:

const bounds = createBounds(path);

Am putea apoi trece la Calculul componentei folosind ref, cum ar fi:

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

Și asta cu succes seturi harta legat atunci când activitatea este încărcat.

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

Cu un pic mai mult de săpat și de cercetare, am găsit o soluție viabilă voi împărtăși pentru beneficiul altora:

Am gasit acest post pe GitHub

Folosind pe care am creat-o funcția de helper pentru a crea 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;
};

În StravaMap componenta I apoi trece calea am avut pentru această funcție și pentru a obține limitele de genul asta:

const bounds = createBounds(path);

Am putea apoi trece la Calculul componentei folosind ref, cum ar fi:

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

Și asta cu succes seturi harta legat atunci când activitatea este încărcat.

Reacționează Google Maps a obține limitele de Polilinie

Problema

Cel mai bun răspuns

În alte limbi

Această pagină este în alte limbi

Popular în această categorie

Întrebări frecvente în această categorie