如何对地址进行地理编码并设为React中Google Map的初始中心点

实现方法 #

前置准备 #

首先确认你在Google Cloud控制台中，已经为当前使用的API密钥开启了Geocoding API的访问权限，未开启权限会直接返回请求失败。

代码修改步骤 #

1. 扩展组件状态

新增地理编码相关状态，包括解析后的地图中心点、目标地址、加载状态：

state = {
  showingInfoWindow: false,
  activeMarker: {},
  selectedPlace: {},
  // 解析失败时的兜底坐标
  mapCenter: { lat: -1.2884, lng: 36.8233 },
  // 需要解析的文本地址，也可通过props从父组件传入
  targetAddress: "上海市浦东新区陆家嘴",
  // 地理编码加载状态
  isLoading: true
};

2. 新增地理编码请求方法

利用Google Maps SDK内置的Geocoder实例发起地址解析请求，无需手动调用HTTP接口，可避免跨域问题：

componentDidMount() {
  // 组件挂载完成后触发地理编码
  this.getGeocodeLocation();
}

getGeocodeLocation = () => {
  const geocoder = new this.props.google.maps.Geocoder();
  geocoder.geocode(
    { address: this.state.targetAddress },
    (results, status) => {
      if (status === "OK") {
        const coords = results[0].geometry.location;
        this.setState({
          mapCenter: {
            lat: coords.lat(),
            lng: coords.lng()
          },
          isLoading: false
        });
      } else {
        console.error("地址解析失败，错误状态：", status);
        // 可在此处添加自定义报错逻辑，比如提示用户地址无效
        this.setState({ isLoading: false });
      }
    }
  );
};

3. 绑定坐标到地图和标记

修改Map和Marker组件的属性，绑定解析得到的坐标：

render() {
  // 加载状态下可自定义加载提示
  if (this.state.isLoading) return <div>地图加载中...</div>;

  return (
    <Map
      google={this.props.google}
      zoom={14}
      style={mapStyles}
      initialCenter={this.state.mapCenter}
    >
      <Marker
        onClick={this.onMarkerClick}
        name={"Vendor XYZ's Location"}
        // 标记位置绑定解析后的坐标
        position={this.state.mapCenter}
      />
      {/* InfoWindow代码保持不变 */}
      <InfoWindow
        marker={this.state.activeMarker}
        visible={this.state.showingInfoWindow}
        onClose={this.onClose}
      >
        <div>
          <h4>{this.state.selectedPlace.name}</h4>
        </div>
      </InfoWindow>
    </Map>
  );
}

完整修改后代码 #

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,
    activeMarker: {},
    selectedPlace: {},
    mapCenter: { lat: -1.2884, lng: 36.8233 },
    targetAddress: "上海市浦东新区陆家嘴",
    isLoading: true
  };

  componentDidMount() {
    this.getGeocodeLocation();
  }

  getGeocodeLocation = () => {
    const geocoder = new this.props.google.maps.Geocoder();
    geocoder.geocode(
      { address: this.state.targetAddress },
      (results, status) => {
        if (status === "OK") {
          const coords = results[0].geometry.location;
          this.setState({
            mapCenter: {
              lat: coords.lat(),
              lng: coords.lng()
            },
            isLoading: false
          });
        } else {
          console.error("地址解析失败：", status);
          this.setState({ isLoading: false });
        }
      }
    );
  };

  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() {
    if (this.state.isLoading) return <div>地图加载中...</div>;

    return (
      <Map
        google={this.props.google}
        zoom={14}
        style={mapStyles}
        initialCenter={this.state.mapCenter}
      >
        <Marker
          onClick={this.onMarkerClick}
          name={"Vendor XYZ's Location"}
          position={this.state.mapCenter}
        />
        <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);

注意事项 #

• 如果需要支持动态变更地址，把Map组件的initialCenter属性替换为center属性，同时在componentDidUpdate钩子中监听地址变更，重新触发地理编码即可
• Geocoding API有调用限额，超出免费额度后会产生费用，生产环境请做好用量监控和异常降级处理
• 若地址解析精度不足，可以在请求时补充地区、城市等限制参数，缩小解析范围，提升准确率

内容的提问来源于stack exchange，提问作者pGill