Question

使用此Google Map lib中的link，我可以在地图上创建默认标记。但是，此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})
}

在要渲染GoogleMap的MapContainer中：

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
  }));   
}

我得到的错误是：永久违反：对象无效，无法作为React子对象（找到：带有键{__gm，gm_accessors_，position，gm_bindings_，map，closure_uid_621320123，clickable，visible}的对象）。如果要渲染子级集合，请改用数组。

有什么主意吗？

默认标记作为功能组件

0 个答案: