AngularJS中Google Maps Autocomplete.getPlace()返回geometry不稳定求助

这个问题我做项目时也碰到过，核心原因就是你调用getPlace()的时机不对——Google Maps Autocomplete的getPlace()方法只有在用户明确选择了下拉建议里的地点时，才会返回包含完整geometry属性的对象；如果在用户还没选建议、或者组件还没完成地点解析的时候就调用它，就大概率会拿到geometry: null的结果，这也是你遇到“一半概率正常、一半异常”的原因：有时候你刚好在用户选完建议后触发了调用，有时候是在选之前/解析过程中调用的。

正确的解决方式：监听place_changed事件 #

Autocomplete组件本身提供了place_changed事件，这个事件只会在用户选择了一个有效的地点建议、且组件完成地点解析后触发。你需要把调用getPlace()的逻辑放在这个事件的回调里，而不是自己随便找时机触发。

以下是AngularJS控制器中的示例代码：

angular.module('yourApp').controller('MapController', function($scope) {
  // 获取输入框元素
  const autocompleteInput = document.getElementById('location-input');
  
  // 初始化Autocomplete组件
  const autocomplete = new google.maps.places.Autocomplete(autocompleteInput, {
    // 可以添加配置项，比如限制国家、类型等
    types: ['geocode'],
    componentRestrictions: { country: 'cn' }
  });

  // 关键：监听place_changed事件
  autocomplete.addListener('place_changed', function() {
    const selectedPlace = autocomplete.getPlace();
    
    // 先判断geometry是否存在
    if (selectedPlace.geometry && selectedPlace.geometry.location) {
      // 这里可以安全地使用地点坐标
      const lat = selectedPlace.geometry.location.lat();
      const lng = selectedPlace.geometry.location.lng();
      console.log('选中地点的坐标：', lat, lng);
      
      // 你的后续业务逻辑，比如在地图上标记位置、保存坐标等
      $scope.$apply(() => {
        $scope.selectedLat = lat;
        $scope.selectedLng = lng;
      });
    } else {
      // 处理用户未选择有效地点的情况，比如给出提示
      alert('请从下拉列表中选择一个有效的地点');
    }
  });
});

额外注意事项 #

• 不要在input的blur、keyup这类事件中调用getPlace()，这些时机都无法保证Autocomplete已经完成地点解析。
• 如果用户输入的是非常模糊的地址，Google Maps可能无法解析出具体的geometry，这种情况可以通过提示用户选择更精确的建议来避免。

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