Node.js+AngularJS：如何将Google Places Autocomplete结果存入变量

嘿，刚好踩过这个坑！你现在用的是Google Places自带UI的Autocomplete控件，它默认会自动渲染下拉结果，要实现“先把结果存变量处理”的需求，咱们得换个思路——绕过默认UI，直接调用Places Service的getPlacePredictions方法拿原始数据。

结合你的Node.js+AngularJS场景，给你具体的实现方案：

1. 准备基础依赖 #

首先确保Google Places API已加载（记得替换成你的API密钥），页面头部引入：

<script src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&libraries=places"></script>

另外，PlacesService需要绑定到一个DOM元素（哪怕是隐藏的），在页面里加个隐藏容器：

<div id="places-service-container" style="display: none;"></div>

2. AngularJS控制器实现自定义逻辑 #

在你的控制器里，监听输入框的输入事件，手动触发预测请求，把结果存到变量里：

angular.module('你的应用名').controller('CityAutocompleteCtrl', function($scope) {
  // 初始化PlacesService实例
  var placesService = new google.maps.places.PlacesService(document.getElementById('places-service-container'));
  
  // 用来存储城市预测结果的变量
  $scope.cityPredictions = [];

  // 输入框触发的获取预测函数（绑定到输入事件）
  $scope.fetchCityPredictions = function(inputValue) {
    // 输入长度不足时清空结果，减少无效请求
    if (!inputValue || inputValue.length < 2) {
      $scope.cityPredictions = [];
      return;
    }

    // 调用Places API获取城市预测
    placesService.getPlacePredictions({
      input: inputValue,
      types: ['(cities)'], // 限定只返回城市类型结果
      // 可选：加region参数限定地区，比如region: 'cn'只返回国内城市
    }, function(predictions, status) {
      if (status === google.maps.places.PlacesServiceStatus.OK) {
        // 把结果存到变量，接下来你想怎么处理都行
        $scope.cityPredictions = predictions;
        // 这里可以加你的自定义逻辑：比如过滤特定城市、格式化名称
        $scope.$apply(); // 异步回调需手动触发Angular脏检查，更新视图
      } else {
        console.error('获取城市预测失败:', status);
        $scope.cityPredictions = [];
        $scope.$apply();
      }
    });
  };
});

3. 页面输入框绑定事件 #

在HTML里把输入框和控制器的函数绑定：

<input type="text" ng-model="cityInput" ng-keyup="fetchCityPredictions(cityInput)" placeholder="输入城市名...">

这样操作后，用户输入时，所有城市预测结果都会存到$scope.cityPredictions变量里，完全由你掌控后续处理——不管是过滤特定区域、格式化数据，还是之后再决定如何展示，都不会出现默认的下拉UI啦。

小提醒：

• 记得替换代码里的你的API密钥和你的应用名
• 可以把触发事件换成ng-change，或者加防抖函数减少API请求次数
• 异步回调里的$scope.$apply()不能少，否则Angular无法感知到变量更新

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