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

问题描述

所以我使用 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);

解决方法

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

以下是实现此目的的 sample code 和代码片段：

/*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);