React Google 地图获取折线的边界

Question

我一直在与 Strava 开发人员 API 打交道，并一直在构建一个基本的 React 应用程序来获取 soem Starva 活动并将其显示在列表中。可以找到回购 here.

我有一张地图可以在该组件中呈现 activity 路线。

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

源文件here.

多边形渲染得很好，但我现在想弄清楚如何缩放地图以将 epolyline 放入边界。

我可能漏掉了一些东西，但我不清楚如何获取多段线实例以获取边界或地图以设置边界。

我知道如何根据路径缓冲 poluyline 但是一旦我完成并有了边界，我如何使用这个 React Google Maps[=29 设置边界=] 图书馆?

谢谢，

Answer 1

通过更多的挖掘和研究，我找到了一个可行的解决方案，我将分享给其他人：

我在 GitHub

上找到了这个 post

使用它我创建了一个辅助函数来创建 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);

然后我可以使用 ref 将其传递给 GoogleMap 组件：

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

加载 activity 时成功设置地图绑定。

React Google 地图获取折线的边界

React Google Maps get bounds of Polyline

react-typescript

google-polyline

react-google-maps

strava