我想知道是否有人可以帮助我。
我使用下面的代码在用户输入地址详细信息时执行 Google map 自动完成操作:
// JavaScript Document
var geocoder;
var map;
var marker;
function initialize(){
var myOptions = {
zoom: 6,
center: new google.maps.LatLng(54.312195845815246, -4.45948481875007),
mapTypeId: google.maps.MapTypeId.TERRAIN,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_RIGHT
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ZOOM_PAN,
position: google.maps.ControlPosition.TOP_LEFT
},
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.BOTTOM_LEFT
}
};
map = new google.maps.Map(document.getElementById('map'), myOptions);
geocoder = new google.maps.Geocoder();
marker = new google.maps.Marker({
map: map,
draggable: true
});
}
$(document).ready(function() {
initialize();
$(function() {
$("#address").autocomplete({
//This bit uses the geocoder to fetch address values
source: function(request, response) {
geocoder.geocode( {'address': request.term }, function(results, status) {
response($.map(results, function(item) {
return {
label: item.formatted_address,
value: item.formatted_address,
latitude: item.geometry.location.lat(),
longitude: item.geometry.location.lng()
}
}));
})
},
//This bit is executed upon selection of an address
select: function(event, ui) {
$("#osgb36lat").val(ui.item.latitude);
$("#osgb36lon").val(ui.item.longitude);
var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
marker.setPosition(location);
map.setZoom(16);
map.setCenter(location);
}
});
});
google.maps.event.addListener(marker, 'dragend', function() {
geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
$('#address').val(results[0].formatted_address);
$('#osgb36lat').val(marker.getPosition().lat());
$('#osgb36lon').val(marker.getPosition().lng());
var point = marker.getPosition();
map.panTo(point);
}
}
});
});
})
这就是我将其放置在表单中的方式。
<div>
<input name="address" type="text" id="address" size="40" maxlength="40" style="font:Calibri; font-size:12px" />
</div>
我现在想要做的是限制列表中可查看的项目数量。我在几个论坛和 Google map 网站上进行了一些研究,但似乎找不到解决方案,所以我什至不确定这是否可行。
我只是想知道是否有人可以看看这个,并提供一些关于我如何能够做到这一点的指导。
非常感谢和亲切的问候
最佳答案
Google map V3 API 现在包含自动完成功能,可以调整任何文本输入字段以自动完成位置和/或地点。它尚未显示缩略图,但添加地点对于某些用例来说非常有用,详细信息如下:
文档:http://code.google.com/apis/maps/documentation/javascript/places.html#places_autocomplete
引用:http://code.google.com/apis/maps/documentation/javascript/reference.html#Autocomplete
示例:http://code.google.com/apis/maps/documentation/javascript/examples/places-autocomplete.html
我想这些会对你有帮助......
关于javascript - Google map 自动完成列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10785665/