Question

我正在使用“ google-maps-react”，并尝试通过点击将新标记添加到我的地图中。

我目前设法管理特定latLng的日志，但似乎无法创建一个新的。我对React很新。

我的onMapClick可以查找纬度和经度。但是我想我需要将位置添加到数组中，然后使用该位置来更新地图。可能是错误的

sourceSearch | regex=[\$\£\€](\d+(?:\.\d{1,2})?) | result

我目前正在使用的解决方案是，我只是在render（）中使用Marker中数组的位置对一些Markers进行了硬编码

  onMapClick = (map,maps,e) => { 
    const { latLng } = e; 
    const latitude = e.latLng.lat(); 
    const longitude = e.latLng.lng(); 
    console.log(latitude + ", " + longitude);  

    var marker = new window.google.maps.Marker({
      position: e.latLng,
      setMap: map,
    });
  }

我的InfoWindow是：

   <Marker
      onClick={this.onMarkerClick}
      name={storedLocations[0]}
      position={{lat:listLatitude[0], lan:listLongitude[0]}}
    />

Answer 1

我的onMapClick可以查找纬度和经度。但是我认为我需要将位置添加到数组中，然后使用该位置更新地图。

这确实是React的方式，但与其通过Google Maps API实例化标记，不如考虑通过state保留数据（标记位置），然后React将像这样进行其余工作：

class MapContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      locations: []
    };
    this.handleMapClick = this.handleMapClick.bind(this);
  }

  handleMapClick = (ref, map, ev) => {
    const location = ev.latLng;
    this.setState(prevState => ({
      locations: [...prevState.locations, location]
    }));
    map.panTo(location);
  };

  render() {
    return (
      <div className="map-container">
        <Map
          google={this.props.google}
          className={"map"}
          zoom={this.props.zoom}
          initialCenter={this.props.center}
          onClick={this.handleMapClick}
        >
          {this.state.locations.map((location, i) => {
            return (
              <Marker
                key={i}
                position={{ lat: location.lat(), lng: location.lng() }}
              />
            );
          })}
        </Map>
      </div>
    );
  }
}

说明：

locations状态用于跟踪所有位置
locations状态传递到Marker组件以渲染标记

下一步可能是为标记列表引入单独的组件，Thinking in React向组件介绍以下内容：

一种技术就是单一责任原则，即理想情况下，组件应该只做一件事。如果最终增长，应该分解为较小的子组件。

const MarkersList = props => {
  const { locations, ...markerProps } = props;
  return (
    <span>
      {locations.map((location, i) => {
        return (
          <Marker
            key={i}
            {...markerProps}
            position={{ lat: location.lat(), lng: location.lng() }}
          />
        );
      })}
    </span>
  );
};

Here is a demo展示了如何通过google-maps-react库

在地图点击上添加制造商

Google Maps React，使用经纬度添加标记

1 个答案: