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

时间:2015-05-04 20:22:27

标签: javascript jsp google-maps-api-3

这是我第一次使用Google地图API,而且此时我很无奈。

因此,在我的JSP页面中,我正在尝试提供一个文本框,当您开始输入时,它会建议位置下拉。

所以,首先我添加了Google地图API

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

另外,我想将国家/地区仅限制为India,因此我在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">

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

但是当我从建议的下拉菜单中选择一个地点时,我的文本框会填充:place, city, state, country

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

有可能吗?

1 个答案:

答案 0 :(得分: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