在点击时向Google地图显示标记

Question

我正在使用Google Map React软件包将Google Map集成到我的React项目中。 我可以使用json数组中的经纬度来绘制地图标记。 但是在点击地图时，显示点击区域的标记未显示，但是我通过_onClick函数获取经纬度值

_onClick = ({x, y, lat, lng, event}) => {
    this.setState({
        lat: lat, lng: lng
    }); 
}
<GoogleMapReact onClick={this._onClick}
    center={this.state.center}
    defaultZoom={this.props.zoom} 
    options = {{ mapTypeId: 'satellite' }}
    style={{height: '680px', width: '560px'}}
>
    {this.state.markers.map((marker, i) =>{
          return(
                 <AnyReactComponent key={i}
                      lat={marker.lat}
                      lng={marker.lng}
                      img_src={marker.img_src}
                  />

                )
    })}      
</GoogleMapReact>

我该如何解决才能在点击区域显示标记？

Answer 1

您将存储单击区域的lat,lng因此需要渲染这些值的标记。 再使用一个状态变量isClick ，在单击地图时更新该值，并有条件地渲染标记。

像这样：

_onClick = ({x, y, lat, lng, event}) => {
    this.setState({
        lat: lat, 
        lng: lng,
        isClicked: true
    }); 
}

<GoogleMapReact onClick={this._onClick}
    center={this.state.center}
    defaultZoom={this.props.zoom} 
    options = {{ mapTypeId: 'satellite' }}
    style={{height: '680px', width: '560px'}}
>
    {this.state.markers.map((marker, i) => {
        return(
            <AnyReactComponent key={i}
                lat={marker.lat}
                lng={marker.lng}
                img_src={marker.img_src}
            />

        )
    })} 
    {this.state.isClicked? 
        <AnyReactComponent key={i}
            lat={this.state.lat}
            lng={this.state.lng}
            img_src={marker.img_src}
        /> 
    :null}   
</GoogleMapReact>