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

Posted 2023-05-06

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

【英文标题】：Geocode an address and set it as Initial Center of Google Map

【发布时间】：2021-08-31 09:16:22

【问题描述】：

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

【问题讨论】：

似乎这是设置初始中心的反应钩子/生命周期方法/构造函数的情况？

【参考方案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);