react-google-maps：如何使用 fitBounds、panBy、panTo、panToBounds 公共 API？

Posted 2023-02-23

【中文标题】react-google-maps：如何使用 fitBounds、panBy、panTo、panToBounds 公共 API？

【英文标题】：react-google-maps: how to use fitBounds, panBy, panTo, panToBounds public APIs?

【发布时间】：2017-11-13 05:00:04

【问题描述】：

根据React Google Maps library，可以从ref对象调用这四个方法。

看起来很奇怪的是，这些方法应该接收两个参数，一个地图实例和其他参数，如下所示：

fitBounds(map, args)  return map.fitBounds(...args); 

但是，当以这种方式调用 fitBounds() 时，地图上不会发生任何事情，不会更改边界，也不会引发错误。这是我构建组件的方式，在 componentDidUpdate 中调用 fitBounds：

import React from 'react'
import  withGoogleMap, GoogleMap, InfoWindow, Marker, OverlayView  from 'react-google-maps'
import InfoBox from 'react-google-maps/lib/addons/InfoBox'
import map from 'lodash/map'

// Higher-Order Component
const AllocatedPlacesMap = withGoogleMap(props => (
  <GoogleMap
    center=props.center
    defaultZoom=4
    options= scrollwheel: false, minZoom: 3, maxZoom: 15 
    onCenterChanged=props.onCenterChanged
    ref=props.onMapMounted>
    props.markers.map((marker, index) => (
      <Marker
        key=index
        position=marker.position
      />
    ))
  </GoogleMap>
));

class Map extends React.Component 
  constructor(props) 
    super(props);
    this.state = 
    ;
  

  getCenter = () => 
    this._bounds = new google.maps.LatLngBounds();

    this.props.markers.forEach((marker, index) => 
      const position = new google.maps.LatLng(marker.lat, marker.lng);
      this._bounds.extend(position);
    );

    return this._bounds.getCenter();
  

  componentDidUpdate() 
    this._map.fitBounds(this._map, this._bounds);
  

  handleMapMounted = (map) => 
    this._map = map;
  

  render() 
    return (
      <div className="allocated-places">
        <AllocatedPlacesMap
          containerElement=
            <div style= height: `100%`  />
          
          mapElement=
            <div style= height: `100%`  />
          
          center=this.getCenter()
          markers=props.markers
          onMapMounted=this.handleMapMounted
        />
      </div>
    )
  


export default Map;

知道在这种情况下调用 fitBounds() 的正确方法是什么吗？在这方面似乎缺乏文档和示例。

【问题讨论】：

fitBounds() 不再需要地图实例作为第一个参数。此错误也在库的 v9 中得到修复。

【参考方案1】：

查看函数定义fitBounds(map, args) return map.fitBounds(...args); ，我们可以看到spread operator 应用于args。这表明 args 应该是一个数组。

所以，在您的代码中，第二个参数应该是数组类型：

this._map.fitBounds(this._map, [this._bounds]);

您还可以包含数组的第二个元素，该元素将被转换为 Maps javascript API fitBound() 方法的第二个可选参数 padding。

this._map.fitBounds(this._map, [this._bounds, 100]);

希望这会有所帮助！

【讨论】：

谢谢！但是this._bounds 是一个对象，因此扩展运算符应该可以在不将其包装在数组中的情况下工作。我尝试包装它只是为了测试，但没有任何反应，没有错误，地图不适合标记。

如果散布对象，您将拥有该对象的可迭代属性作为 map.fitBounds() 的参数。但根据documentation，第一个参数必须是整个 LatLngBounds 或 LatLngBoundsLiteral。你可以尝试在这个函数调用处设置断点并检查 this._bounds 对象吗？

初始渲染有这个问题吗？文档说：“componentDidUpdate() 在更新发生后立即调用。初始渲染不调用此方法。” facebook.github.io/react/docs/…

【参考方案2】：

这就是你如何使用 react map ref 调用 panTo 和 fitBounds

this.map.panTo(
  lat:e.latLng.lat(), lng: e.latLng.lng()
)
const bounds = new google.maps.LatLngBounds()
bounds.extend(
  lat:e.latLng.lat(), lng: e.latLng.lng()
)
this.map.fitBounds(bounds)