Reagovať Google Maps dostať hranice Polyline

Question 1

Bol som hrať sa s Strava vývojárom API a trochu boli budovy základnej Reagovať aplikácie na načítanie soem Starva činností a jej zobrazenie v zozname. Repo môžete nájsť tu.

Mám mapu, ktorá určuje činnosť trasy v tejto súčasti.

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

Zdrojový súbor tu.

Mnohouholník sa poskytuje v poriadku, ale ja som sa teraz snaží zistiť, ako môžem zväčšiť mapu, aby sa zmestili th epolyline do autu.

Možno som mising soemthing ale nemám jasnú predstavu, ako zohnať polyline stupňa dostať hranice alebo na mape, aby ste nastavili hranice.

Viem, ako na tlmenie poluyline založené na cestu, ale keď som urobil thay a mať hranice, ako môžem nastaviť viazané pomocou tejto Reagovať Google Maps knižnice?

Vďaka,

Question 2

S trochu viac kopanie a výskumu som zistil, funkčné riešenia budem zdieľať na prospech iných:

Našiel som tento príspevok na GitHub

Použitia, ktoré som vytvoril pomocné funkcie na vytvorenie 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;
};

V mojom StravaMap komponent som potom prejsť cestu sme mali na túto funkciu a získať hranice, ako je tento:

const bounds = createBounds(path);

Môžem potom prejsť že na GoogleMap zložka pomocou ref ako:

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

A že úspešne nastavuje mapu viazané, ak je aktivita je načítaný.

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

S trochu viac kopanie a výskumu som zistil, funkčné riešenia budem zdieľať na prospech iných:

Našiel som tento príspevok na GitHub

Použitia, ktoré som vytvoril pomocné funkcie na vytvorenie 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;
};

V mojom StravaMap komponent som potom prejsť cestu sme mali na túto funkciu a získať hranice, ako je tento:

const bounds = createBounds(path);

Môžem potom prejsť že na GoogleMap zložka pomocou ref ako:

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

A že úspešne nastavuje mapu viazané, ak je aktivita je načítaný.

Reagovať Google Maps dostať hranice Polyline

Otázka

Najlepšiu odpoveď

V iných jazykoch

Táto stránka je v iných jazykoch

Populárne v tejto kategórii

Obľúbené otázky v tejto kategórii