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

David-IT 发表于 Dev

大卫-IT

我之所以来找您，是因为我无法使用自动完成位置功能代替Google Maps JS api v3。

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

具体来说，我想有两个字段，一个用于公司名称，另一个用于地址。我希望仅在地址字段上执行自动补全，但要考虑公司名称。

因此，如果我在公司字段中填写“ XYZ公司”，并在地址中填写“美国纽约”，则应查找“美国纽约XYZ公司”。

一个输入的经典示例：

功能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" />

您认为有可能吗？如果是这样，怎么办？

谢谢

先生先生

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

请参阅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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。