我无法在 google-maps-react 库中的标记上获得 onClick 事件

问题描述

我试图在标记上获得 onClick 事件，但我无法获得。我正在浏览文档（google-maps-react），我也创建了静态位置并添加了标记，但仍然没有得到它。有人可以帮我吗？

我想让 onClick 事件处理标记。我已经尝试了很多，但我无法找到解决方案。该文档还提到了正确命名，因此我得到了他们在文档中提供的确切名称。

NPM 包：https://www.npmjs.com/package/google-maps-react

import { Map,InfoWindow,Marker,GoogleApiWrapper } from "google-maps-react";
import React,{ Component } from "react";

class WithMarkers extends Component {
  state = {
    activeMarker: {},selectedplace: {},showingInfoWindow: false
  };

  onMarkerClick = (props,marker) =>
    this.setState(
      {
        activeMarker: marker,selectedplace: props,showingInfoWindow: true
      },() => {
        console.log("Click on marker");
      }
    );

  onInfoWindowClose = () =>
    this.setState({
      activeMarker: null,showingInfoWindow: false
    });

  onMapClicked = () => {
    if (this.state.showingInfoWindow)
      this.setState({
        activeMarker: null,showingInfoWindow: false
      });
  };

  render() {
    if (!this.props.loaded) return <div>Loading...</div>;

    return (
      <Map
        className="map"
        google={this.props.google}
        onClick={this.onMapClicked}
        style={{ height: "100%",position: "relative",width: "100%" }}
        zoom={14}
      >
        <Marker
          name="SOMA"
          onClick={this.onMarkerClick}
          position={{ lat: 37.778519,lng: -122.40564 }}
        />

        <Marker
          name="Dolores park"
          onClick={this.onMarkerClick}
          position={{ lat: 37.759703,lng: -122.428093 }}
        />

        <Marker name="Current location" onClick={this.onMarkerClick} />

        <InfoWindow
          marker={this.state.activeMarker}
          onClose={this.onInfoWindowClose}
          visible={this.state.showingInfoWindow}
        >
          <div>
            <h1>{this.state.selectedplace.name}</h1>
          </div>
        </InfoWindow>

        <InfoWindow position={{ lat: 37.765703,lng: -122.42564 }} visible>
          <small>
            Click on any of the markers to display an additional info.
          </small>
        </InfoWindow>
      </Map>
    );
  }
}
// export default WithMarkers;
export default GoogleApiWrapper({
  apiKey: "KEY"
})(WithMarkers);

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）