Реагируйте на карты Google, чтобы получить границы полилинии

Question 1

Я немного поиграл с API разработчика Strava и создал базовое приложение React для извлечения активностей soem Starva и отображения их в списке. Репо можно найти здесь.

У меня есть карта, которая отображает маршрут активности в этом компоненте.

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

Исходный файл здесь.

Полигон отображается нормально, но сейчас я пытаюсь понять, как я могу увеличить карту, чтобы вписать эполинию в границы.

Возможно, я что-то неправильно понимаю, но у меня нет четкого представления о том, как получить экземпляр полилинии, чтобы получить границы, или карту, чтобы установить границы.

Я знаю, как буферизировать полулинию на основе пути, но как только я это сделаю и у меня будут границы, как я могу установить границу, используя эту библиотеку карт Google React?

Спасибо,

Question 2

Немного покопавшись и исследовав, я нашел работоспособное решение, которым поделюсь на благо других:

Я нашел этот пост на GitHub

Используя это, я создал вспомогательную функцию для создания 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;
};

В моем компоненте StravaMap я затем передаю путь, который у нас был к этой функции, и получаю такие границы:

const bounds = createBounds(path);

Затем я могу передать это компоненту GoogleMap, используя ссылку, например:

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

И это успешно устанавливает привязку карты при загрузке действия.

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

Немного покопавшись и исследовав, я нашел работоспособное решение, которым поделюсь на благо других:

Я нашел этот пост на GitHub

Используя это, я создал вспомогательную функцию для создания 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;
};

В моем компоненте StravaMap я затем передаю путь, который у нас был к этой функции, и получаю такие границы:

const bounds = createBounds(path);

Затем я могу передать это компоненту GoogleMap, используя ссылку, например:

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

И это успешно устанавливает привязку карты при загрузке действия.

Реагируйте на карты Google, чтобы получить границы полилинии

Вопрос

Лучший ответ

На других языках

Эта страница на других языках

Популярное в этой категории

Популярные вопросы в этой категории