google-maps-react 添加标记

Question

我正在使用 google-maps-react 库添加一个 google map，其标记随 state 更改而更新。

我想在从 Google 的位置 api 获取位置并将它们存储在 state 之后动态添加标记。 我获取数据，将其添加到 state 然后调用 displayMarkers：

displayMarkers = () => {
    this.state.newStations.map((station, index) => {
      let lat = station.geometry.location.lat();
      let lng = station.geometry.location.lng();
      return (
        <Marker
          key={index}
          id={index}
          position={{
            lat: lat,
            lng: lng,
          }}
          onClick={() => console.log("You clicked me!")}
        />
      );
    });
  };

State 正在更新，但标记未出现在 map 上。

阅读 google-maps-react 的文档，在我看来，标记必须是 map 的孩子，才能覆盖到 map 上。

标记 要在 Map 上放置标记，请将其作为组件的子项包括在内。

有什么方法可以将标记作为 Map 的孩子返回？

在谷歌地图 API 中，您似乎可以这样做：

var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Hello World!'
  });

您传入值 map，这是您希望将标记附加或覆盖到的 map。 道具“地图”存在于 google-maps-react 中，但 Marker 中似乎没有接受 map 的属性。

Answer 1

你可以在 google-maps-react 中这样做。 您需要在 state 中有一个数组来保存结果数组。 然后在获取 Places 结果时，创建一个数组变量，然后将结果推送到该 arrau 变量上。 然后将标记数组 state 值设置为数组变量。

Then inside your Map object, put the Marker object however you need to add condition that will check if the marker array state value is not null and you map each of the marker array state value in the marker object..

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

export class MapContainer extends Component {
  state = {
    center: {
      lat: 40.854885,
      lng: -88.081807
    },
    markers: null,
  };

  fetchPlaces = (mapProps, map) => {
    let coordinates = [];
    const { google } = mapProps;
    const service = new google.maps.places.PlacesService(map);
    var request = {
      location: this.state.center,
      radius: "500",
      query: "restaurant"
    };
    service.textSearch(request, (results, status) => {
      if (status == google.maps.places.PlacesServiceStatus.OK) {
        for (var i = 0; i < results.length; i++) {
          //console.log(results[i]);
          coordinates.push(results[i]);
        }
        this.setState({ markers: coordinates });
      }
    });
  };

  clickMarker = (props, marker) => {
    console.log(props.placeId);
  };

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

    return (
      <div>
        <Map
          className="map"
          google={this.props.google}
          center={{
            lat: this.state.center.lat,
            lng: this.state.center.lng
          }}
          onReady={this.fetchPlaces}
          style={{ height: "100%", position: "relative", width: "100%" }}
          zoom={8}
        >
          {this.state.markers != null &&
            this.state.markers.map(coords => (
              <Marker
                key={coords.place_id}
                position={coords.geometry.location}
                onClick={this.clickMarker}
                placeId={coords.place_id}
              />
            ))}
        </Map>
      </div>
    );
  }
}
export default GoogleApiWrapper({
  apiKey: "YOUR_API_KEY"
})(MapContainer);```