这是我第一次使用Google地图API,而且此时我很无奈。
因此,在我的JSP页面中,我正在尝试提供一个文本框,当您开始输入时,它会建议位置下拉。
所以,首先我添加了Google地图API
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&
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
填充文本框。
有可能吗?
答案 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
。