使用google-maps-react npm打包--有没有一种方法可以单击地图来添加标记？

Question

我正在使用google-maps-react组件，但我似乎找不到任何有关如何通过单击地图来动态添加标记的信息。https://github.com/fullstackreact/google-maps-react

我可以用代码添加一个标记，但我希望用户能够通过单击来添加它，并且不知道如何添加该事件侦听器。我已经有了一个用于显示标记信息的事件侦听器。

它不是一个可用的功能吗？有人能给我指个方向吗？

谢谢。

我的代码：

export class MapContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showingInfoWindow: false,
      activeMarker: {},
      selectedPlace: {}
    };

    // binding this to event-handler functions
    this.onMarkerClick = this.onMarkerClick.bind(this);
    this.onMapClicked = this.onMapClicked.bind(this);
  }

  onMarkerClick = (props, marker, e) => {
    this.setState({
      selectedPlace: props,
      activeMarker: marker,
      showingInfoWindow: true
    });
  };

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

  render() {
    return (
      <div>
        <Map google={this.props.google} onClick={this.onMapClicked} style={{width: '70%', height: '80%', position: 'relative'}} className={'map'} zoom={2}>
          <Marker onClick={this.onMarkerClick} name={"Current location"} />

          <Marker
          onClick={this.onMarkerClick}
          title={'The marker`s title will appear as a tooltip.'}
          name={'SOMA'}
          position={{lat: 37.778519, lng: -122.405640}} />

          <InfoWindow
            marker={this.state.activeMarker}
            visible={this.state.showingInfoWindow}
          >
            <div>
              <h1>{this.state.selectedPlace.name}</h1>
            </div>
          </InfoWindow>
        </Map>
        </div>
    );
  }
}

Answer 1

您可以通过使用以下代码在地图上单击来放置标记。

mapClicked = (a, b, c) => {
if (this.state.showingInfoWindow) {
  this.setState({
    showingInfoWindow: false,
    activeMarker: null
  });
} else {
  let lat = c.latLng.lat();
  let lng = c.latLng.lng();
  let houseLocation = { lat: lat, lng: lng };
  this.setState({ houseLocation });
}

mapClicked接受三个参数，第三个'c‘是地图上的坐标。所以你可以只取这些坐标，并在这些位置做一个标记。这段代码只允许您放置一个标记，每次您单击地图时，“houseLocation”都会发生变化。但是你可以直接修改代码来创建一个新的Marker。