Question

我想做的是将一个地址数组发送到一个组件，使用Google的geocoder将这些地址转换为经/纬度坐标，然后使用google maps api在带有标记的google map上放置这些位置反应包装。我非常仔细地遵循了本教程（https://dev.to/jessicabetts/how-to-use-google-maps-api-and-react-js-26c2），最大的不同是我在地址解析器中工作。由于地址解析器是异步的，因此在解决承诺后，我无法使用新转换的坐标重新渲染地图。下面是我现在拥有的代码：

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

const mapStyles = {
  width: '100%',
  height: '300px'
};

let geocoder;
let addressData = [{location: "146 Pierrepont St, Brooklyn, NY, USA"}, {location: "153 Remsen St, Brooklyn, NY, USA"}];

export class MapContainer extends Component {
  constructor (props) {
    super(props);
    this.onMarkerClick = this.onMarkerClick.bind(this);
    this.displayMarkers = this.displayMarkers.bind(this);
    this.state = {
        lat: 40.6946768,
        lng: -73.99161700000002,
        showingInfoWindow: false,
        activeMarker: {},
        selectedPlace: {},
        places: [],
        stores: [{latitude: 47.49855629475769, longitude: -122.14184416996333},
          {latitude: 47.359423, longitude: -122.021071},
          {latitude: 47.2052192687988, longitude: -121.988426208496},
          {latitude: 47.6307081, longitude: -122.1434325},
          {latitude: 47.3084488, longitude: -122.2140121},
          {latitude: 47.5524695, longitude: -122.0425407}]
    }
  }

  componentDidMount () {
    this.plotPoints()
  }

  plotPoints () {
    let locations = this.getPoints(geocoder)
    let places = new Array()

    Promise.all(locations)
      .then(function(returnVals) {
        returnVals.forEach(function(latLng) {
          let place = {latitude: latLng[0], longitude: latLng[1]}
          places.push(place)
        })
      })
    this.setState (() => {
      return {
          places: places
      }
    });
  }

  getPoints(geocoder) {
    let locationData = [];
    for (let i = 0; i < addressData.length; i++) {
      locationData.push(this.findLatLang(addressData[i].location, geocoder))
    }
    return locationData // array of promises
  }

  findLatLang(address, geocoder) {
    return new Promise(function(resolve, reject) {
      geocoder.geocode({
        'address': address
      }, function(results, status) {
        if (status === 'OK') {
          console.log(results);
          resolve([results[0].geometry.location.lat(), results[0].geometry.location.lng()]);
        } else {
          reject(new Error('Couldnt\'t find the location ' + address));
        }
      })
    })
  }

  displayMarkers (stores) {
    return stores.map((place, index) => {
      return <Marker key={index} id={index} position={{
       lat: place.latitude,
       lng: place.longitude
     }}
     onClick={() => console.log("You clicked me!")} />
    })
  }

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

  render() {
    geocoder = new this.props.google.maps.Geocoder();
    return (
      <div className="container place-map">
        <div className="row">
          <div className="col-md-12">
            <Map
              google={this.props.google}
              zoom={14}
              style={mapStyles}
              initialCenter={{
                lat: this.state.lat,
                lng: this.state.lng
              }}
              
            >
              {this.displayMarkers(this.state.stores)}
              {this.displayMarkers(this.state.places)}
              <InfoWindow
                marker={this.state.activeMarker}
                visible={this.state.showingInfoWindow}
              >
                <div>Your Location Here!</div>
              </InfoWindow>
            </Map>
          </div>
        </div>
      </div>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: 'AIzaSyCOJDrZ_DXmHzbzSXv74mULU3aMu3rNrQc'
})(MapContainer);

“商店”数组会在地图上渲染标记，因为在地图的初始渲染处有可用的坐标-但是被推到“位置”数组上的坐标永远不会渲染。如果将“地方”的日志语句放入render（），我可以看到我正在从地址解析器取回有效坐标。

帮助！一直以来我一直在努力奋斗（您可以从代码的当前草率状态看出）。

Answer 1

您需要将setState的{{1}}移到places回调中。

您在数组仍为空且未解决承诺之前调用它

Promise.all

使用Geocoder时添加多个标记以反应Google地图

1 个答案: