React Google Maps获取Polyline边界并设置地图适配路线缩放

你不需要单独获取Polyline实例，直接使用已经解码得到的path坐标数组即可完成边界计算，具体修改如下：

1. 用useRef存储地图实例，通过GoogleMap组件的onLoad回调获取地图实例并赋值
2. 用useEffect监听path的变化，路径更新时自动计算边界并适配
3. 调用地图实例的fitBounds方法自动调整缩放层级和中心点，保证完整展示整条路线

修改后的完整组件代码：

import { useRef, useEffect } from 'react';

const StravaMap = withScriptjs(
  withGoogleMap(({ zoom, activity }: StravaMapProps) => {
    // 存储地图实例
    const mapRef = useRef<google.maps.Map | null>(null);
    const center = {
      lat: activity.start_latitude,
      lng: activity.start_longitude,
    };

    const path = activity.map.summary_polyline
      ? createPath(polyline.decode(activity.map.summary_polyline))
      : [];

    // 路径更新时自动适配边界
    useEffect(() => {
      if (!mapRef.current || path.length === 0) return;
      // 初始化边界实例
      const bounds = new google.maps.LatLngBounds();
      // 遍历所有路径点扩展边界
      path.forEach(point => bounds.extend(point));
      // 自动调整地图视角，第二个参数为边界padding值（单位像素），可自定义调整
      mapRef.current.fitBounds(bounds, 20);
    }, [path]);

    return (
      <GoogleMap
        defaultZoom={zoom}
        defaultCenter={center}
        defaultOptions={mapOptions}
        // 地图加载完成后获取实例
        onLoad={map => mapRef.current = map}
      >
        <Marker position={center} />
        {path.length > 0 && (
          <Polyline options={polyLineOptions} path={path} visible />
        )}
      </GoogleMap>
    );
  }),
);

如果你的项目中没有全局的google类型提示，可以把new google.maps.LatLngBounds替换为new window.google.maps.LatLngBounds即可。

内容的提问来源于stack exchange，提问作者TResponse