在點擊時向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>