1

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

export function MapView<I extends Mappable>({ getData }: MapViewProps<I>): JSX.Element {
  const [mapZoom, setMapZoom] = useState(5);
  const [mapBounds, setMapBounds] = useState<[number, number, number, number]>([-1, -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自动更新边界的，但这似乎并不理想。有什么想法吗？

4

1 回答 1

0

在地图加载时，您可以放置​​一个函数，其中地图的中心每秒都在变化。您可以使用Maps JavaScript Geometry Librarycompute offset从 90 度航向中的指定距离获取坐标，使其看起来像是水平向右滚动。您可以更改标题的值，以从您想要的不同方向获取中心。您还需要确保您设置的距离在当前缩放级别的当前地图范围内。这是我在不使用反应库的情况下制作的示例代码。请使用您的 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);
        }}
      />
    );
  }
}
于 2020-10-13T03:31:15.403 回答