如何通过@react-google-maps/api获取经纬度？解决读取location报错

问题根源 #

你当前通过输入框的onChange事件获取的e.target.value只是用户输入的文本字符串，并非Google Places API返回的包含地理信息的Place对象，所以直接访问place.geometry.location必然会触发undefined错误。

修复步骤 #

@react-google-maps/api的Autocomplete组件提供了专门的onPlaceChanged回调，用于获取选中的完整地点对象，具体修复如下：

1. 创建Ref保存Autocomplete实例
   用useRef保存Autocomplete组件的实例，方便后续调用getPlace()方法：

   import { useRef } from 'react';
   // ...
   const autocompleteRef = useRef(null);
   

2. 替换输入框onChange为Autocomplete的专用回调
   给Autocomplete组件添加onLoad和onPlaceChanged属性，放弃用输入框的onChange获取地点对象：

   <Autocomplete
     onLoad={(autocomplete) => {
       autocompleteRef.current = autocomplete;
     }}
     onPlaceChanged={() => {
       const place = autocompleteRef.current.getPlace();
       // 先判断是否有有效的地理信息
       if (place.geometry?.location) {
         // 提取经纬度（注意lat()和lng()是方法，不是属性）
         const latitude = place.geometry.location.lat();
         const longitude = place.geometry.location.lng();
         console.log("纬度：", latitude, "经度：", longitude);
         // 更新mapLocation状态
         setMapLocation({ lat: latitude, lng: longitude });
       } else {
         console.log("未选中有效地点，请选择下拉列表中的选项");
       }
     }}
   >
     <TextFieldComponent
       name="location"
       placeholder="Enter Partner Location"
       labelName="Partner Location"
       // 若需要处理用户输入的文本，可以保留此onChange，但不要用来获取Place对象
       onChange={(e) => console.log("用户输入文本：", e.target.value)}
     />
   </Autocomplete>
   

3. 修正mapLocation的初始值
   原代码中mapLocation初始值是空字符串，不符合经纬度对象的类型，修改为：

   const [mapLocation, setMapLocation] = useState(null);
   

   对应Marker的position属性也可以简化：

   <Marker position={mapLocation || center} />
   

额外注意事项 #

• 确保你的Google Maps API Key已经启用了Places API，否则无法获取地点数据
• 必须等待places库加载完成（你的代码中已经配置了libraries: ["places"]，这部分无需修改）
• 用可选链操作符?.判断place.geometry?.location，避免用户输入无效内容时再次触发错误

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