Réagir Google Maps obtenir des limites de la Polyligne

Question 1

J'ai été jouer avec le Strava API développeur un peu et en été la construction d'une base de Réagir app pour aller chercher un certain Starva activités et de les afficher dans une liste. Repo peut être trouvé ici.

J'ai une carte qui rend l'activité de l'itinéraire de cette composante.

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

Fichier Source ici.

Le polygone rend bien, mais je suis maintenant essayer de comprendre comment je peux agrandir la carte pour s'adapter à th epolyline dans les limites.

J'ai peut-être mising soemthing mais je n'ai pas une idée précise sur la façon de se procurer de la polyligne exemple pour obtenir des limites ou de la carte de fixer des limites.

Je sais comment le tampon de la poluyline fondée sur le chemin, mais une fois que j'ai fait de thay, et ont les limites, comment puis-je définir la limite à l'aide de cette Réagissent Google Maps bibliothèque?

Merci,

Question 2

Avec un peu plus de creuser et de recherches, j'ai trouvé une solution viable, je vais partager pour le bien des autres:

J'ai trouvé ce post sur GitHub

L'aide que j'ai créé une fonction d'aide pour créer le 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;
};

Dans mon StravaMap composante j'ai ensuite passer le chemin que nous avions à cette fonction et d'obtenir les limites comme ceci:

const bounds = createBounds(path);

Je peux passer ensuite que la GoogleMap composant à l'aide de l'arbitre comme:

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

Et qui applique correctement la carte lié lorsque l'activité est chargé.

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

Avec un peu plus de creuser et de recherches, j'ai trouvé une solution viable, je vais partager pour le bien des autres:

J'ai trouvé ce post sur GitHub

L'aide que j'ai créé une fonction d'aide pour créer le 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;
};

Dans mon StravaMap composante j'ai ensuite passer le chemin que nous avions à cette fonction et d'obtenir les limites comme ceci:

const bounds = createBounds(path);

Je peux passer ensuite que la GoogleMap composant à l'aide de l'arbitre comme:

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

Et qui applique correctement la carte lié lorsque l'activité est chargé.

Réagir Google Maps obtenir des limites de la Polyligne

La question

La meilleure réponse

Dans d'autres langues

Cette page est dans d'autres langues

Populaires dans cette catégorie

Questions populaires dans cette catégorie