如何在google-maps-react中通过用户点击添加带经纬度的标记？

我看你遇到的问题是点击地图时，虽然能把标记项添加到state的markers数组里，但event.latLng没法正确获取经纬度，导致标记无法正常渲染出来对吧？这是因为event.latLng是Google Maps提供的LatLng实例对象，不是普通的JS对象，直接存到state里的话，React没办法正确解析它的经纬度值，而且你也没在Map组件里循环渲染这些标记。

给你两个关键的修改点：

1. 把LatLng对象转换成普通的经纬度对象 #

在mapClicked方法里，不要直接存储event.latLng，而是调用它的lat()和lng()方法拿到具体的数值，转换成普通的JS对象：

mapClicked = (event) => {
  const { markers } = this.state;
  // 提取经纬度数值，转换成普通JS对象
  const newMarker = {
    position: {
      lat: event.latLng.lat(),
      lng: event.latLng.lng()
    },
    key: Date.now(),
    defaultAnimation: 2,
  };
  this.setState({
    markers: [newMarker, ...markers]
  });
}

2. 在Map组件中循环渲染所有标记 #

现在你只渲染了初始定位的那个Marker，需要遍历this.state.markers数组，把每个用户点击添加的标记都渲染出来：

render() {
  if (!this.props.loaded) {
    return <div>Loading...</div>
  }
  const style = {
    width: '100%',
    height: '100vh'
  }
  return (
    <Map
      google={this.props.google}
      zoom={11}
      style={style}
      initialCenter={{ lat: this.state.lat, lng: this.state.lng }}
      center={{ lat: this.state.lat, lng: this.state.lng }}
      onClick={this.mapClicked}
    >
      {/* 初始定位标记 */}
      <Marker
        title={'Geolocation'}
        position={{ lat: this.state.lat, lng: this.state.lng }}
      />
      {/* 循环渲染所有点击添加的标记 */}
      {this.state.markers.map(marker => (
        <Marker
          key={marker.key}
          position={marker.position}
          defaultAnimation={marker.defaultAnimation}
        />
      ))}
    </Map>
  );
}

这样修改之后，点击地图时就能正确获取经纬度并存入state，同时所有标记都会被渲染到地图上了。

内容的提问来源于stack exchange，提问作者KT-mongo