Question

我正在使用Google map react软件包在我的反应项目中集成谷歌地图。我可以使用lat渲染地图标记，我在json数组中使用了很长的数据。但是点击地图时，显示点击区域的标记没有显示，但是我用_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>

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

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>

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

1 个答案: