javascript - 使用 google-map api 仅使用确切位置填充文本框

Question

这是我第一次使用 Google map API，此时我很无助。

因此，在我的 JSP 页面中，我尝试提供一个文本框，当您开始在其中输入内容时，该文本框会建议位置下拉列表。

所以，首先我已经包含了 Google map API

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;
        libraries=places" 
        type="text/javascript" /></script>

另外，我想将国家/地区限制为印度，因此我在 JSP 中添加了以下代码 -

function initialize(fieldId) {
    var options = {
        componentRestrictions : {
            country : "in"
        }
    };

    var input = document.getElementById(fieldId);
    var autocomplete = new google.maps.places.Autocomplete(input, options);
}

我的 JSP 的其他部分如下所示:

<script type="text/javascript">
    $(document).ready(function() {
        google.maps.event.addDomListener(window, 'load', initialize('fid'));
    });
</script>

<input id="fid" type="text" autocomplete="on">

现在，当我开始在文本框中输入内容时，我得到了预期的结果 -

但是当我从建议的下拉列表中选择一个地点时，我的文本框会填充:地点、城市、州、国家

我希望我的文本框只填充确切的位置。在我的示例中，我希望文本框仅填充 Powai。

可能吗？

Answer 1

根据the documentation ，Google 地点详细信息返回的 JSON 包含名为 address_components 的对象数组。
该数组包含地址的部分内容，例如邮政编码、街道号码等...

您似乎对属性 types 包含值 locality 的对象感兴趣，这是您应该放入文本框中的值。

google.maps.event.addListener(autocomplete, 'place_changed', function () {
    var place = autocomplete.getPlace();
    if (place.address_components)
    {
        for(var i in place.address_components)
        {
            if(place.address_components[i].hasOwnProperty("types"))
            {
                if(place.address_components[i].types.indexOf("locality") == 0)
                    $("#YourTextbox").text(place.address_components[i].short_name);

            }
        }
    }

只需将 $("#YourTextbox") 替换为文本框的 ID，或者如果您使用的是纯 JS 解决方案，则使用 document.getElementById。