我已经在搜索上实现了谷歌地图API。我的代码工作正常,直到自动生成的位置,但我想要这样的设施,我可以得到准确的位置,只提供城市名称,而不是整个格式的字符串。
对于EX:
请检查此映像http://demo.ncryptedprojects.com/nct_bnb_clone_new/untitled.png
我正在输入城市名称孟买在搜索框和谷歌地图API检索所有值在下拉。当某人没有选择任何值从下拉和直接按回车后的城市名称,我不能得到准确的搜索城市孟买在地图。我真正想做的是,当某人输入城市名称,然后搜索它应该自动搜索第一个出现从下拉像“孟买马哈拉施特拉邦,印度”
HTML表单
<input name="location" id="location" type="text"/>
Google map API
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
$(function() {
var e;
e = $('.search-form input[name="location"]')[0];
return new google.maps.places.Autocomplete(e, {
types: ["geocode"]
})
});
这很棘手,因为默认情况下,google places将查找地图中心附近的位置,而不管下拉菜单中的建议如何。
因此,您必须从下拉列表中找到第一个建议,document.queryselector('.pac-item')
-提取位置并使用geocoder查找该位置的latlng。
提取位置的代码:
function extractLocation(item) {
var text = item.innerText || item.textContent;
var upper = text.toUpperCase();
var result='';
for (var i=0;i<text.length;i++) {
if (text[i]==upper[i]) {
result+=' ';
}
result+=text[i];
}
return result;
}
在searchbox enter上,选择第一个建议,提取位置,通过地理编码器查找latlng并放置标记:
input.onkeyup = function(e) {
var code = (e.keyCode ? e.keyCode : e.which);
var places = searchBox.getPlaces();
if (code == 13 && places!=[]) {
var firstSuggestion = document.querySelector('.pac-item');
var query = extractLocation(firstSuggestion);
geocoder.geocode({"address":query }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
clearMarkers();
var latLng = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());
var marker = new google.maps.Marker({
map: map,
title: results[0].address_components[0].long_name,
position: latLng,
});
markers.push(marker);
map.setCenter(latLng);
map.setZoom(10);
}
});
}
}
工作小提琴->http://jsfidle.net/cdnt8/