Question

我试过了：

<GoogleMap
  defaultZoom={14}
  center={{lat: props.mapCenter.lat, lng: props.mapCenter.lng}}
  onCenterChanged={getCenter()}
/>

更新：我使用的是Stateless Functional Component：

const MarkerClustererExampleGoogleMap = withGoogleMap(props => (

    <GoogleMap 
        defaultZoom={14} 
        center={{lat: props.mapCenter.lat, lng: props.mapCenter.lng}} 
        onCenterChanged={getCenter()} 
    >
)

但我收到错误：

getCenter未定义。

如何解决此问题，谢谢。

Answer 1

您可以通过React getCenter()从地图API调用getZoom()，getBounds()，ref等函数到地图组件

这是一个粗略的示例，请注意，这是未经测试的代码段，应被视为伪代码，但希望它可以为您提供有关如何进行此设置的想法：

let ref

...

<GoogleMap 
  ref={(mapRef) => ref = mapRef} // bind the ref
  onCenterChanged={() => {
    ref.getCenter() // get the center, zoom, whatever using the ref
  }}
/>

文档中有更详细的示例，例如here。

Answer 2

您需要像这样使用它：

onCenterChanged={this.getCenter}

注意：onCenterChanged是一个事件，因此请确保在构造函数中定义了绑定，如下所示

this.getCenter = this.getCenter.bind(this);

或者您也可以使用arrow function，Arrow Function:

onCenterChanged={ (e)=> this.getCenter(e)}

更新：您没有提到您正在使用Stateless Functional Component，无论何时询问，请尝试提供完整信息。

选中此项，如何定义function内的Stateless Functional Component：

var App = () => {

   var click = function() {
      console.log('a');
   }
   
   return(
      <div onClick={click}> Click </div>
   )
}

ReactDOM.render(<App/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

Answer 3

看一下示例：Adding a places search box。这部分代码将向您显示正确的路径）

handleMapMounted(map) {
  this._map = map;
}

handleBoundsChanged() {
  this.setState({
  bounds: this._map.getBounds(),
  center: this._map.getCenter(),
});
}

如何调用函数getCenter（）和其他的反应 - 谷歌地图

3 个答案: