Google 地图 API JS - 使用两个组合字段放置自动完成

Question

我来找你是因为我无法使用自动完成位置功能而不是我想要的 Google maps JS api v3。

确实，我想通过添加另一个字段的值来实现自动完成。

具体来说，我想要两个字段，一个是公司名称，另一个是地址。我希望仅对地址字段执行自动完成，但要考虑公司名称。

所以如果我在公司字段中填写 "Company XYZ" 并在地址中填写 "New York, USA"，它应该查找 "Company XYZ, New York, USA".

一个输入的经典示例：

函数 JS :

function initialize() {
        // Create the autocomplete object, restricting the search
        // to geographical location types.
        autocomplete = new google.maps.places.Autocomplete(
                /** @type {HTMLInputElement} */(document.getElementById('addr')),
                { types: ['establishment', 'geocode'] });
        // When the user selects an address from the dropdown,
        // populate the address fields in the form.
        google.maps.event.addListener(autocomplete, 'place_changed', function() {
            fillInAddress();
        });
    }

HTML 形式 :

<input class="field" id="company_name" />
<input class="field" id="addr" />

你觉得可能吗？如果可以，怎么做？

谢谢。

Answer 1

您可以使用自动完成服务并获得对两个字段值的查询预测。

见https://developers.google.com/maps/documentation/javascript/examples/places-queryprediction

var autocompleteService = new google.maps.places.AutocompleteService();

getPlacePredictions(document.getElementById('company').value + ', ' + document.getElementById('address').value);

function getPlacePredictions(search) {

    autocompleteService.getPlacePredictions({
        input: search,
        types: ['establishment', 'geocode']
    }, callback);
}

下面是自定义自动完成预测列表的完整示例（样式基于 Google 实现），具有搜索突出显示、地点详细信息请求和使用标记在地图上显示。

JSFiddle demo

Google 地图 API JS - 使用两个组合字段放置自动完成

Google Maps API JS - Place autocomplete with two combined fields

javascript

google-maps

google-maps-api-3