如何在React中自动滚动Google Map视图？

问题描述

使用google-map-react包，我在TypeScript中创建了一个MapView组件，如下所示。

export function MapView<I extends Mappable>({ getData }: MapViewProps<I>): JSX.Element {
  const [mapZoom,setMapZoom] = useState(5);
  const [mapBounds,setMapBounds] = useState<[number,number,number]>([-1,-1,-1]);

  return (
    <div className="map-container">
      <GoogleMapReact
        bootstrapURLKeys={{ key: "API_KEY" }}
        defaultCenter={{
          lat: 39.381266,lng: -97.922211,}}
        zoom={mapZoom}
        options={{ maxZoom: 10 }}
        onChange={({ zoom,bounds }) => {
          setMapZoom(zoom);
          setMapBounds([bounds.nw.lng,bounds.se.lat,bounds.se.lng,bounds.nw.lat]);
        }}
      />
    </div>
  );
}

如果用户尚未触摸地图，我想使地图缓慢地水平滚动。我的第一个想法是添加一个useEffect来自动更新边界，但这似乎并不理想。有什么想法吗？

解决方法

在地图加载时，您可以放置​​一个函数，使地图的中心每秒变化一次。您可以使用Maps JavaScript Geometry Library's compute offset以90度方向从指定距离获取坐标，以使其看起来像是向右水平滚动。您可以更改标题的值，以从所需的不同方向获取中心。您还需要确保设置的距离在当前缩放级别的当前地图范围内。这是我使用的sample code，没有使用react库。请使用您的API密钥来使示例工作。

代码段：

class App extends Component {
  render() {
    return (
      <Map
        id="myMap"
        options={{
          center: { lat: 41.0082,lng: 28.9784 },zoom: 5
        }}
        onMapLoad={map => {
          setInterval(function() {
            let currentCenter = map.getCenter();
            let spherical = google.maps.geometry.spherical;
            let newLat = spherical.computeOffset(currentCenter,500000,90);
            let newCenter= new google.maps.LatLng(newLat.lat(),newLat.lng());
            map.setCenter(newCenter);
          },1000);
        }}
      />
    );
  }
}