带有 fitBounds 的 Google 地图无法缩放 [英] Google Maps with fitBounds don't zoom
问题描述
以下代码可以正常工作，只是它不能缩放到给定的点.
Following code works ok, except that it not zoom to the given points.
如果我直接使用 Latlng，它就可以工作，无需将地址转换为 Latlng.
If I take the Latlng direct it works, without convert the address to Latlng.
我需要将地址转换为 latlng，因为我从数据库中获取地址.
I need to convert a address to latlng because I get the addresses out of a database.
有人知道出了什么问题吗?
Anyone an idea what is wrong?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps Test</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 600px; height: 400px;"></div>
<script type="text/javascript">
var arrAddress = new Array();
arrAddress[0] = "kelbergen, Amsterdam";
arrAddress[1] = "Kraailookstraat, Amsterdam";
arrAddress[2] = "krootstraat, Amsterdam";
var optionMap = {
zoom: 16,
MapTypeId: google.maps.MapTypeId.ROADMAP,
};
var map = new google.maps.Map(document.getElementById('map'), optionMap);
var geocoder = new google.maps.Geocoder();
var latlngbounds = new google.maps.LatLngBounds();
for(var i = 0; i < arrAddress.length; i++) {
geocoder.geocode( { 'address': arrAddress[i]}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
latlngbounds.extend(results[0].geometry.location);
}
});
}
map.fitBounds(latlngbounds);
</script>
</body>
</html>
推荐答案
Google 的地理编码器是异步的，因此在对所有点进行地理编码之前会调用 map.fitbounds(latlngbounds).解决此问题的最简单方法是将 map.fitbounds(latlngbounds) 放在扩展调用之后.
Google's geocoder is asynchronous so the map.fitbounds(latlngbounds) is being called before all of the points have been geocoded. The simplest way to fix this would be to put the map.fitbounds(latlngbounds) right after the extend call.
for(var i = 0; i < arrAddress.length; i++) {
geocoder.geocode( { 'address': arrAddress[i]}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
latlngbounds.extend(results[0].geometry.location);
map.fitBounds(latlngbounds);
}
});
}
更新:这是一个更好的答案.在最后一个例子中，map.fitbounds(latlngbounds) 方法被重复调用，当有很多标记时，这可能会产生问题.使用这个问题中的答案，您可以创建一个异步循环以确保map.fitbounds(latlngbounds) 只调用一次.
UPDATE:
Here is a better answer. In the last example the map.fitbounds(latlngbounds) method is called repeatedly, which can possibly create problems when there are lots of markers. Using the answer in this question you can create an asynchronous loop to make sure the map.fitbounds(latlngbounds) is only called once.
//replaced the for loop.
asyncLoop(arrAddress.length, function(loop) {
geocoder.geocode({
'address': arrAddress[loop.iteration()] //loop counter
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
latlngbounds.extend(results[0].geometry.location);
}
//increment the loop counter.
loop.next();
});
}, function() {
//when the loop is complete call fit bounds.
map.fitBounds(latlngbounds);
});
function asyncLoop(iterations, func, callback) {
var index = 0;
var done = false;
var loop = {
next: function() {
if (done) {
return;
}
if (index < iterations) {
index++;
func(loop);
} else {
done = true;
callback();
}
},
iteration: function() {
return index - 1;
},
break: function() {
done = true;
callback();
}
};
loop.next();
return loop;
}
示例已更新:工作代码的摆弄.
这篇关于带有 fitBounds 的 Google 地图无法缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
