react-google-maps：如何使用fitBounds，panBy，panTo，panToBounds公共API？ [英] react-google-maps: how to use fitBounds, panBy, panTo, panToBounds public APIs?

问题描述

根据反应谷歌地图库，你可以从ref对象调用这四个方法。

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

  fitBounds（map，args）{return map.fitBounds（... args ）;然而，当以这种方式调用fitBounds（）时，地图上没有任何事情发生，没有边界被改变并没有错误抛出。这是我构建组件的方式，在componentDidUpdate中调用fitBounds： 
 
 
  import从'react'反应
 import从'react-google-maps'
导入InfoBox从'react-google-maps / lib / addons / InfoBox'中导入InfoBox 
从'lodash / map'导入地图{从Google地图，GoogleMap，InfoWindow，Marker，OverlayView} '
 
 //高阶组件​​
 const AllocatedPlacesMap = withGoogleMap（道具=>（
< 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> 
））; 
 
类Map继承React.Component {
构造函数（道具）{
 super（道具）; 
 this.state = {
}; 
} 
 
 getCenter =（）=> {
 this._bounds = new google.maps.LatLngBounds（）; $（标记，索引）=> {
 const position = new google.maps.LatLng（marker.lat，marker.lng）; 
 
 $ b this.props.markers.forEach $ b this._bounds.extend（position）; 
}）; 
 
返回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> 
）
} 
} 
 
导出默认地图; 
  
在这种情况下，有什么方法可以调用fitBounds（）？文档和示例似乎缺乏这方面的内容。
解决方案
查看函数定义 fitBounds（map ，args）{return map.fitBounds（... args）; } 我们可以看到传播运算符应用于参数。这表明 args 应该是一个数组。因此，在你的代码中，第二个参数应该是一个数组类型：
  this._map.fitBounds（this._map，[this._bounds]）; 
  
您还可以包含数组的第二个元素，该元素将被转换为第二个可选参数<$地图JavaScript API的c $ c> padding   fitBound （）方法。
  this._map.fitBounds（this._map，[this._bounds，100]） ; 
  
希望这有助于您！
 
According to the React Google Maps library, you can call these four methods from the ref object.

What seems weird, is that these methods are supposed to receive two parameters, a map instance and other arguments, like so:
fitBounds(map, args) { return map.fitBounds(...args); }
However, when calling fitBounds() this way, nothing happens on the map, no bounds are changed and no errors are thrown. This is the way I have structured the component, calling fitBounds in componentDidUpdate:
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;
Any idea of what is the correct way to call fitBounds() in this case? documentation and examples seem to be lacking in this regard.
解决方案
Looking at the function definition fitBounds(map, args) { return map.fitBounds(...args); } we can see that the spread operator is applied on args. That suggests that the args should be an array. 

So, in your code the second parameter should be of an array type:
this._map.fitBounds(this._map, [this._bounds]);
You can also include the second element of the array that will be transformed into the second optional parameter padding of the Maps JavaScript API fitBound() method.
this._map.fitBounds(this._map, [this._bounds, 100]);
Hope this helps!

                        
这篇关于react-google-maps：如何使用fitBounds，panBy，panTo，panToBounds公共API？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！