对地址进行地理编码并将其设置为谷歌地图的初始中心

Question

所以我使用 google maps API 在我的 react 网页上显示地图，我知道如何通过输入 long 和 lat 来设置初始中心点和标记，但是，现在我正在尝试使用地理编码 API，并将该地理编码推送到地图 api 以将其加载为初始中心点。任何有关如何做到这一点的指导表示赞赏。谢谢你。以下是到目前为止我为 google maps api 提供的代码：

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

const mapStyles = {
  width: "100%",
  height: "30%",
};

export class MapContainer extends Component {
  state = {
    showingInfoWindow: false, // Hides or shows the InfoWindow
    activeMarker: {}, // Shows the active marker upon click
    selectedPlace: {}, // Shows the InfoWindow to the selected place upon a marker
  };
  onMarkerClick = (props, marker, e) =>
    this.setState({
      selectedPlace: props,
      activeMarker: marker,
      showingInfoWindow: true,
    });

  onClose = (props) => {
    if (this.state.showingInfoWindow) {
      this.setState({
        showingInfoWindow: false,
        activeMarker: null,
      });
    }
  };
  render() {
    return (
      <Map
        google={this.props.google}
        zoom={14}
        style={mapStyles}
        initialCenter={{
          lat: -1.2884,
          lng: 36.8233,
        }}
      >
        <Marker
          onClick={this.onMarkerClick}
          name={"Vendor XYZ's Location"}
        />
        <InfoWindow
          marker={this.state.activeMarker}
          visible={this.state.showingInfoWindow}
          onClose={this.onClose}
        >
          <div>
            <h4>{this.state.selectedPlace.name}</h4>
          </div>
        </InfoWindow>
      </Map>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: "apiKEY GOES HERE",
})(MapContainer);

Answer 1

由于您使用的是google-maps-library，因此当您打算将地图的中心更改为地理编码结果时，可以使用center 而不是initialCenter。然后，您可以使用状态变量来操纵更改。至于Geocoding服务，可以在componentDidMount函数里面调用。

这是一个 sample code 和下面的代码 sn-p 来实现这一点：

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

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

export class MapContainer extends Component {
  state = {
    showingInfoWindow: false, // Hides or shows the InfoWindow
    activeMarker: {}, // Shows the active marker upon click
    selectedPlace: {},
    markerName: "Vendor XYZ's Location",
    center: {
      lat: -1.2884,
      lng: 36.8233
    }
  };

  componentDidMount = () => {
    //Geocoding services
    const geocoder = new google.maps.Geocoder();
    const address = 'New York';
    geocoder.geocode({ address: address }, (results, status) => {
      if (status === 'OK') {  
        this.setState({
          center: results[0].geometry.location,
          markerName: results[0].formatted_address
        });
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
  };
  onMarkerClick = (props, marker, e) => {
    console.log(props);
    this.setState({
      selectedPlace: props,
      activeMarker: marker,
      showingInfoWindow: true
    });
  };

  onClose = props => {
    if (this.state.showingInfoWindow) {
      this.setState({
        showingInfoWindow: false,
        activeMarker: null
      });
    }
  };
  render() {
    return (
      <Map
        google={this.props.google}
        zoom={14}
        style={mapStyles}
        initialCenter={this.state.center}
        center={this.state.center}
      >
        <Marker
          position={this.state.center}
          onClick={this.onMarkerClick}
          name={this.state.markerName}
        />
        <InfoWindow
          marker={this.state.activeMarker}
          visible={this.state.showingInfoWindow}
          onClose={this.onClose}
        >
          <div>
            <h4>{this.state.selectedPlace.name}</h4>
          </div>
        </InfoWindow>
      </Map>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: "apiKEY GOES HERE"
})(MapContainer);