点击时向谷歌地图显示标记答案

【问题标题】：Show marker to Google Map on Click点击时向谷歌地图显示标记
【发布时间】：2018-08-04 22:03:30
【问题描述】：

我正在使用Google map react 包将谷歌地图集成到我的反应项目中。我可以用我的 json 数组中的 lat、long 来渲染地图标记。但是在单击地图时，未显示显示单击区域的标记，但我使用 _onClick 函数获取 lat、lng 值

_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>

如何解决这个问题以在点击区域显示标记？

【问题讨论】：

当你点击地图上的任何地方时，标记应该显示在那里，这就是你想要的？？
是的。默认情况下应显示一个红色标记。但它没有显示
AnyReactComponent 正在渲染标记？
是的，带有自定义图像标记。但不是点击。它显示在使用给定纬度加载地图时，lng

标签： reactjs google-maps

【解决方案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>

【讨论】：

无论如何这很好，我确实喜欢这个，但它不是谷歌点击的默认标记。但是还是可以接受的。谢谢