如何在 react-google-maps 中调用函数 getCenter() 和其他函数

IT技术 google-maps reactjs
2022-07-30 01:00:35

我试过了:

<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 未定义。

如何解决这个问题,谢谢。

3个回答

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

这是一个粗略的例子,请注意这是一个未经测试的片段,应该被视为伪代码,但它希望它能让您了解如何进行此设置:

let ref

...

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

文档中有更详细的示例说明如何执行此操作,例如此处

你需要像这样使用它:

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'/>

看一下示例:添加地点搜索框这部分代码将向您展示正确的路径)

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

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