React Google Map中经纬度转地名及InfoWindow显示地名方法

嘿，针对你提出的两个React Google Maps相关问题，我来给你详细解答并结合你的代码片段给出可运行的修改方案：

1. 如何通过经纬度获取地点名称？ #

咱们可以借助Google Maps JavaScript API内置的Geocoder服务来实现逆地理编码（把经纬度转换成可读的地点名称）。这个服务不需要额外装依赖，只要你已经正确加载了Google Maps API就能直接用。

2. 如何在InfoWindow中显示地点名称？ #

下面我基于你提供的代码，添加必要的逻辑，实现「点击Marker时获取对应经纬度的地点名称，并在InfoWindow里展示」的功能：

修改后的完整代码示例 #

import React from 'react';
import { compose, withProps, withHandlers, withState } from "recompose"
import { withScriptjs, withGoogleMap, GoogleMap, Marker, InfoWindow } from "react-google-maps"
import { MarkerClusterer } from 'react-google-maps/lib/components/addons/MarkerClusterer';
import { connect } from 'react-redux';

const MapWithMarkers = compose(
  // 用withState维护两个状态：选中的Marker、对应的地点名称
  withState('selectedMarker', 'setSelectedMarker', null),
  withState('placeName', 'setPlaceName', ''),
  withHandlers({
    handleMarkerClick: ({ setSelectedMarker, setPlaceName }) => (marker) => {
      setSelectedMarker(marker);
      // 初始化Geocoder实例
      const geocoder = new window.google.maps.Geocoder();
      // 构造逆地理编码请求的经纬度参数
      const latlng = {
        lat: marker.position.lat(),
        lng: marker.position.lng()
      };
      
      // 发起逆地理编码请求
      geocoder.geocode({ location: latlng }, (results, status) => {
        if (status === window.google.maps.GeocoderStatus.OK) {
          if (results[0]) {
            // 取第一个结果的格式化地址，也可以按需提取更细粒度的信息（比如城市、街道）
            setPlaceName(results[0].formatted_address);
          } else {
            setPlaceName('未找到对应地点');
          }
        } else {
          console.error('地理编码请求失败：', status);
          setPlaceName('获取地点信息失败');
        }
      });
    },
    handleCloseInfoWindow: ({ setSelectedMarker, setPlaceName }) => () => {
      setSelectedMarker(null);
      setPlaceName('');
    }
  }),
  withScriptjs,
  withGoogleMap
)(props => (
  <GoogleMap
    defaultZoom={8}
    defaultCenter={{ lat: -34.397, lng: 150.644 }}
  >
    <MarkerClusterer averageCenter enableRetinaIcons gridSize={60}>
      {props.markers.map(marker => (
        <Marker
          key={marker.id}
          position={marker.position}
          onClick={() => props.handleMarkerClick(marker)}
        >
          {/* 只有选中当前Marker时才显示InfoWindow */}
          {props.selectedMarker === marker && (
            <InfoWindow onCloseClick={props.handleCloseInfoWindow}>
              <div>
                <h3>{props.placeName}</h3>
                {/* 这里可以添加更多你想展示的自定义内容 */}
              </div>
            </InfoWindow>
          )}
        </Marker>
      ))}
    </MarkerClusterer>
  </GoogleMap>
));

// 你的Redux连接逻辑（根据实际state结构调整）
const mapStateToProps = (state) => ({
  markers: state.markers
});

export default connect(mapStateToProps)(MapWithMarkers);

几个关键注意点： #

• Geocoder使用：一定要确保你的Google Maps API Key已经启用了Geocoding API，否则请求会直接失败。可以去Google Cloud控制台检查并启用这个API。
• 状态管理：用withState来跟踪选中的Marker和地点名称，确保InfoWindow的显示/隐藏和内容更新都正常。
• 地址提取：如果不需要完整的格式化地址，你可以从results[0].address_components里提取更具体的部分（比如国家、城市、街道），按需调整即可。

额外小提示： #

如果需要批量转换经纬度到地点名称，要注意Google Maps Geocoding API的请求频率限制，避免触发限流。可以考虑加个防抖或者批量处理的逻辑来优化。

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