在Google自动填充列表中添加收藏位置

时间:2017-10-31 10:50:05

标签: angular google-maps-api-3 google-location-services

有没有办法为Google自动填充添加其他位置。 screenshot

我需要在“我最喜欢的位置”列表中进行搜索,并将该列表中的位置显示在搜索结果的顶部。

请找到我用于谷歌自动填充的代码段。

let autocomplete = new google.maps.places.Autocomplete(elementRef, {
    componentRestrictions: { country: 'KW' }
});

我正在研究角度4.有人可以指导我吗?

谢谢!

1 个答案:

答案 0 :(得分:0)

您可以使用AutocompleteService class并构建自己的建议列表。

function initialize() {

    var search = 'Boston, MA';
    
    var service = new google.maps.places.AutocompleteService();
    service.getPlacePredictions({
        input: search,
        types: ['establishment', 'geocode']
    }, callback);
}

function callback(predictions, status) {

    if (status != google.maps.places.PlacesServiceStatus.OK) {
        alert(status);
        return;
    }

    var results = document.getElementById('results');

    for (var i = 0, prediction; prediction = predictions[i]; i++) {
        results.innerHTML += '<li><div class="result"><h3>' + prediction.description + '</h3>' + JSON.stringify(prediction) + '</div></li>';
    }
}
.result {
 padding: 10px;
 border: 1px solid black;
 margin-bottom: 10px;
}
<p>Query suggestions:</p>
<ul id="results"></ul>

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initialize"
        async defer></script>

然后由您决定是否符合您的需求并在列表中打印您想要的内容。正如您所看到的,在callback函数中将您的收藏夹放在顶部会很容易。