下面有一段代码使用 bounds.extend() 和 map.fitBounds() 调整 map 大小以容纳所有标记。我希望 map 可以以 start_point 为中心并缩小到适当的级别,以便可以看到每个标记。
但是,它最终会最大程度地放大到 start_point。而且我尝试(commen)不每次在 geocoder.geocode 回调函数中调用 bounds.extend() 而是将标记添加到数组中并在一个单独的循环中调用 bounds.extend() ,这也不起作用。
我仔细检查了标记是否已成功创建,如果我手动缩小,我可以看到它们。
mark_pins() 作为 ajax 成功回调函数调用,我没有在此处包含它。
我错过了什么吗?
var map;
var start_point = new google.maps.LatLng(37.519002, -122.131);
var bounds = new google.maps.LatLngBounds();
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: start_point,
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(map_canvas, map_options);
}
google.maps.event.addDomListener(window, 'load', initialize);
function mark_pins(trucks){
var geocoder = new google.maps.Geocoder();
var markersArray = [];
for (i = 0; i < trucks.length; i++) {
// iterate each truck address
geocoder.geocode( { 'address' : trucks[i]['address']}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
marker.setMap(map);
bounds.extend(results[0].geometry.location);
//markersArray.push(marker);
} else {
alert('Internal error: ' + status + address);
}
});
}
var bounds = new google.maps.LatLngBounds();
for (i = 0; i< markersArray.length; i++) {
//code
//bounds.extend(new google.maps.LatLng(markersArray[i][1], markersArray[i][2]));
}
bounds.extend(start_point);
map.setCenter(start_point);
map.fitBounds(bounds);
}
最佳答案
地理编码器是异步的。在结果返回之前,您的代码会调用 map.fitBounds(bounds)
。发布的代码也从不调用 mark_pins 函数。
function mark_pins(trucks) {
var geocoder = new google.maps.Geocoder();
var markersArray = [];
for (i = 0; i < trucks.length; i++) {
// iterate each truck address
geocoder.geocode({
'address': trucks[i]['address']
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
marker.setMap(map);
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);
} else {
alert('Internal error: ' + status + address);
}
});
}
}
代码片段:
var map;
var start_point = new google.maps.LatLng(37.519002, -122.131);
var bounds = new google.maps.LatLngBounds();
var trucks = [{
address: "Sunnyvale, CA"
}, {
address: "Palo Alto, CA"
}, {
address: "Reno, NV"
}, {
address: "Portland, OR"
}];
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: start_point,
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(map_canvas, map_options);
mark_pins(trucks);
}
google.maps.event.addDomListener(window, 'load', initialize);
function mark_pins(trucks) {
var geocoder = new google.maps.Geocoder();
var markersArray = [];
for (i = 0; i < trucks.length; i++) {
// iterate each truck address
geocoder.geocode({
'address': trucks[i]['address']
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
marker.setMap(map);
bounds.extend(results[0].geometry.location);
//markersArray.push(marker);
map.fitBounds(bounds);
} else {
alert('Internal error: ' + status + address);
}
});
}
}
html, body, #map_canvas {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>
关于javascript - google map map.fitBounds() 和 bounds.extend() 未按预期工作。,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25616126/