React Google 地图获取折线的边界
React Google Maps get bounds of Polyline
我一直在与 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 设置边界=] 图书馆?
谢谢,
通过更多的挖掘和研究,我找到了一个可行的解决方案,我将分享给其他人:
我在 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 时成功设置地图绑定。
我一直在与 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 设置边界=] 图书馆?
谢谢,
通过更多的挖掘和研究,我找到了一个可行的解决方案,我将分享给其他人:
我在 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 时成功设置地图绑定。