如何获取变量中返回的 google place Autocomplete API 的结果，而不是将 HTML 输入元素中的结果提供给客户端

Question

我正在使用带有 angularjs 的节点，并希望通过地点自动完成、Google Places API Web 服务获取城市。

  var autocomplete = new google.maps.places.Autocomplete(yourHTMLElement,{types: ['(cities)']});

问题是我不想得到结果，因为用户在输入文本中输入，如上面的示例所示，但我想将其放入变量中并首先对结果进行一些更改

Answer 1

为此，您需要查看Google Maps API 文档。使用该类AutocompleteService以编程方式获取预测。在 Array 对象中获取AutocompleteService预测，但它不会在地图本身中添加任何 UI 控件。

您可以创建 AutocompleteService 对象来以编程方式检索预测。调用 getPlacePredictions() 来检索匹配地点，或调用 getQueryPredictions() 来检索匹配地点和建议的搜索词。注意：AutocompleteService 不添加任何 UI 控件。相反，上述方法返回预测对象的数组。每个预测对象都包含预测文本，以及参考信息和结果如何与用户输入匹配的详细信息。

另请参阅Google Maps API 文档中针对您的具体情况的这一部分。

这是一个带有注释的函数，可以帮助您实现该结果：

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

        // use forEch method to populate the
        // returned preditions in the Array
        predictions.forEach(prediction => {

            // here you can use an NG directive in your Angular app
            let li = document.createElement('li');
            li.appendChild(document.createTextNode(prediction.description));
            document.getElementById('results').appendChild(li);
        });
    };

    // change the string inside the input property as you wish and get the predicted list stored in a variable
    const service = new google.maps.places.AutocompleteService();
    service.getQueryPredictions({
        input: 'pizza near roma'
    }, displaySuggestions);
}