google-maps-react 添加标记答案

【问题标题】：google-maps-react adding a Markergoogle-maps-react 添加标记
【发布时间】：2020-08-20 11:42:21
【问题描述】：

我正在使用 google-maps-react 库添加一个带有标记的 google 地图，该标记会随着状态变化而更新。

我想在从 Google 的 place api 获取位置并将它们存储在状态后动态添加标记。我获取数据，将其添加到状态，然后调用 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!")}
        />
      );
    });
  };

状态正在更新，但标记未出现在地图上。

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

标记要在地图上放置标记，请将其作为组件。

有没有办法将 Marker 作为 Map 的子级返回？

在 google maps API 中，您似乎可以这样做：

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

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

【问题讨论】：

重复How to add markers in react-google-maps?
它不是重复的，因为那是一个不同的库。我正在使用全栈反应 google-maps-react 而不是 react-google-maps。
另外，我不需要知道如何添加标记。这很简单。只需使用 Marker 的子级渲染 Map。我正在尝试向现有地图动态添加标记。
Dynamically Adding Markers on google-map-react的可能重复
评论 1) 我正在使用 google-maps-react - 评论 2) 我正在使用 react-google-maps - 更好的链接到你正在使用的图书馆，并说清楚。

标签： javascript reactjs google-maps google-maps-react

【解决方案1】：

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

然后在您的 Map 对象中，放置 Marker 对象，但是您需要添加条件来检查标记数组状态值是否不为空，并且您将每个标记数组状态值映射到标记对象中..

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);```

【讨论】：