微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决我无法在 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 举报,一经查实,本站将立刻删除。

相关推荐


Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其他元素将获得点击?
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。)
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么?
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么?
如何在Java中聆听按键时移动图像。
Java“Program to an interface”。这是什么意思?