反应谷歌地图得到边界线

Question 1

我已经玩弄的结果开发人员API一点，并已经建设一个基本的反应应用程序，以获取有些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>
    );
  }),
);

来源文件在这里.

面呈现很好，但我现在试图找出如何，我可以放大了的地图，以适应个epolyline进展。

我可以挑件对的事情反而觉得自己但我不清楚如何得到保持段的实例，获得范围或地图设置边界。

我知道怎么缓冲的poluyline基础上的路径，但是一旦我已经做了大公和有边界，怎么可以我设置了定使用这种 反应谷歌地图 图书馆？

谢谢，

Question 2

多一点的挖掘和研究，我们发现一个可行的解决方案，我将分享利益的其他人：

我发现这个职位上。

使用我创造的一个辅助功能创造的 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成分I然后通过的道路，我们不得不这功能，并得到边界是这样的：

const bounds = createBounds(path);

然后我就可以通到这GoogleMap组分使用的参考，如：

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

并且成功地图集束时的活动加载。

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

多一点的挖掘和研究，我们发现一个可行的解决方案，我将分享利益的其他人：

我发现这个职位上。

使用我创造的一个辅助功能创造的 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成分I然后通过的道路，我们不得不这功能，并得到边界是这样的：

const bounds = createBounds(path);

然后我就可以通到这GoogleMap组分使用的参考，如：

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

并且成功地图集束时的活动加载。

反应谷歌地图得到边界线

的问题

最好的答案

其他语言

此页面有其他语言版本

受欢迎的此类别

流行的问题，在这个类别