将自定义数组添加到谷歌自动完成位置 angularJS答案

【问题标题】：add custom array to google autocomplete places angularJS将自定义数组添加到谷歌自动完成位置 angularJS
【发布时间】：2017-09-05 01:53:15
【问题描述】：

在我的应用程序中，我使用指令 gm-places-autocomplete 对 google 地方进行自动完成。我希望通过我的自定义数组来增强这个自动完成建议，下面列出了现有的自动完成功能。下面显示的是我的 HTML

  <input type="text" gm-places-autocomplete ng-model="autocomplete" class="form-control" id="autoCompleteText" />

我有一个自定义数组，详细信息如下。

      var arrayPlaces={[name:"myHome", lat:25.56,lng:56.12],[name:"office",lat:25.36,lng:51.25]}

我想将此自定义数组包含在我的自动完成建议中。有没有可能的方法来实现这一点。

除了angular JS，还有没有其他方式使用Javascript或者Jquery。

提前致谢

【问题讨论】：

您好，欢迎来到 StackOverflow！我很难理解你实际上想要做什么。我建议你仔细阅读this article，因为它会帮助你改进你的问题，所以你更有可能得到答案。

标签： javascript jquery angularjs autocomplete google-places-api

【解决方案1】：

这是适合您情况的 javascript 方式。自动完成结果可在AutocompleteService.getQueryPredictions 的回调中编辑。获得自动完成结果后，您可以在显示之前添加自己的结果。

function initService() {
  var displaySuggestions = function(predictions, status) {
    if (status != google.maps.places.PlacesServiceStatus.OK) {
      alert(status);
      return;
    }

    // add your custom suggestion here
    // add to end
    predictions.push({description: 'custom suggestion 2'});
    // add to head
    predictions.unshift({description: 'custome suggestion 1'});

    predictions.forEach(function(prediction) {
      //console.log(prediction);
      var li = document.createElement('li');
      li.appendChild(document.createTextNode(prediction.description));
      document.getElementById('results').appendChild(li);
    });
  };

  var service = new google.maps.places.AutocompleteService();
  service.getQueryPredictions({
    input: 'pizza near Syd'
  }, displaySuggestions);
}

<div id="right-panel">
  <p>Query suggestions for 'pizza near Syd':</p>
  <ul id="results"></ul>
</div>
<!-- Replace the value of the key parameter with your own API key. -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initService" async defer></script>

【讨论】：