Reagovat Mapy Google se hranice lomená čára

Question 1

Byl jsem hrát si s Strava developer API trochu a buduje základní aplikace Reagovat na načtení některé Starva aktivity a zobrazit ji v seznamu. Repo lze nalézt zde.

Mám mapu, která zobrazuje činnost trasy v této části.

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ý soubor zde.

Polygon vykreslí v pořádku, ale teď jsem se snaží přijít na to, jak mohu přiblížit nebo oddálit mapu, aby se vešly th epolyline do hranic.

Mohu být ohroženy soemthing ale já dont mít jasnou představu, jak sehnat křivku stupně, aby si hranice, nebo mapu, nastavit hranice.

Vím, jak do vyrovnávací paměti poluyline založený na cestě, ale jakmile jsem udělal thay a kroky, jak mohu nastavit vázán pomocí této Reagují Google Maps knihovny?

Díky,

Question 2

S trochou kopání a výzkumu, jsem našel funkční řešení, podělím se ve prospěch druhých:

Našel jsem tento příspěvek na GitHub

Pomocí které jsem vytvořil pomocné funkce, vytvořit 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 mém StravaMap složky pak jsem se projít, cestou jsme měli do této funkce a dostat kroky, jako je tento:

const bounds = createBounds(path);

Můžu pak předat, že na GoogleMap součásti pomocí ref, jako je:

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

A že úspěšně nastaví mapu vázán, když aktivita je načten.

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

S trochou kopání a výzkumu, jsem našel funkční řešení, podělím se ve prospěch druhých:

Našel jsem tento příspěvek na GitHub

Pomocí které jsem vytvořil pomocné funkce, vytvořit 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 mém StravaMap složky pak jsem se projít, cestou jsme měli do této funkce a dostat kroky, jako je tento:

const bounds = createBounds(path);

Můžu pak předat, že na GoogleMap součásti pomocí ref, jako je:

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

A že úspěšně nastaví mapu vázán, když aktivita je načten.

Reagovat Mapy Google se hranice lomená čára

Otázka

Nejlepší odpověď

V jiných jazycích

Tato stránka je v jiných jazycích

Populární v této kategorii

Oblíbené položky v této kategorii