0

使用这个谷歌地图库，从这个链接，我可以在地图上创建一个默认标记。但是，这个 onGoogleApiLoaded() 只会被触发一次。我想始终在地图上居中标记。但是默认标记至少需要一个位置，因此我尝试将默认标记创建为函数并将新位置传递给它，但我无法使其工作。

我有一个将呈现 MapContainer 组件的主要组件。

Main.js:

const { defaultCenter, defaultZoom, div_Height, div_Width, newCenter } = this.state;

return(
        <div style={{width: 500, height: 100}}>
            <div>          
                <MapContainer
                defaultCenter={defaultCenter}
                defaultZoom={defaultZoom}
                onChange={this.onChange}
                onClick={this.onClick}
                div_Height={div_Height}
                div_Width={div_Width}
                newCenter={newCenter}>

                </MapContainer>
            </div>
        </div>

    );

和一个 onChange 函数来获取新的中心坐标。

onChange(center){
    let {newCenter} = this.state;
    newCenter = center.center;
    this.setState({newCenter})
}

在我的 MapContainer 中呈现 GoogleMap：

MapContainer:

const { defaultCenter, defaultZoom, onChange, onClick} = this.props;
let {newCenter} = this.props
const {apiReady, map, maps} = this.state;

return (
  // Important! Always set the container height explicitly
  <div style={{height: '100vh', width: '100%' }}>
    <GoogleMapReact
      /*bootstrapURLKeys={{ key: 'key' }}*/
      defaultCenter={defaultCenter}
      defaultZoom={defaultZoom}
      yesIWantToUseGoogleMapApiInternals={true}
      onGoogleApiLoaded={({map, maps}) => this.apiLoaded(map, maps)} 
      onClick={onClick}
      onChange={onChange}
    >
    {apiReady ? <Marker map={map} maps={maps} newCenter={newCenter}/>: null}
    </GoogleMapReact>
  </div>
);

onGoogleApiLoaded 函数设置地图，地图：

apiLoaded(map, maps) {
if (map && maps) {
 this.setState({
   apiReady: true,
   map: map,
   maps: maps
 });
 }}

最后是我创建标记的方式：

const Marker = (props) => {
  return (new props.maps.Marker({
    position: props.newCenter,
    map: props.map
  }));   
}

我得到的错误是： Invariant Violation: Objects are not valid as a React child (found: object with keys {__gm, gm_accessors_, position, gm_bindings_, map,closure_uid_621320123, clickable, visible})。如果您打算渲染一组子项，请改用数组。

任何想法？

4

0 回答 0