带有fitBounds的Google地图不会缩放 [英] Google Maps with fitBounds don't zoom
问题描述
以下代码可以正常工作，但它不会缩放到给定的点。
如果我直接使用Latlng，它不会将地址转换为Latlng。 / p>
我需要将地址转换为latlng，因为我将地址从数据库中取出。
任何想法有什么不对？
<！DOCTYPE html>
< html>
< head>
< meta http-equiv =content-typecontent =text / html; charset = UTF-8/>
< title> Google地图测试< /标题>
< script src =http://maps.google.com/maps/api/js?sensor=false
type =text / javascript>< / script>
< / head>
< body>
< div id =mapstyle =width：600px; height：400px;>< / div>
< script type =text / javascript>
var arrAddress = new Array（）;
arrAddress [0] =凯尔伯根，阿姆斯特丹;
arrAddress [1] =Kraailookstraat，阿姆斯特丹;
arrAddress [2] =krootstraat，阿姆斯特丹;
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（）; （var i = 0; i< arrAddress.length; i ++）{
geocoder.geocode（{'address'：arrAddress [i]}，函数（结果，状态）{
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）。
<$ （var i = 0; i< arrAddress.length; i ++）{
geocoder.geocode（{'address'：arrAddress [i]}，函数（结果，状态）{
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）只会被调用一次。
//替换for循环。
asyncLoop（arrAddress.length，function（loop）{
geocoder.geocode（{
'address'：arrAddress [loop.iteration（）] //循环计数器
}，函数（结果，状态）{
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）;
}
//增加循环计数器
loop.next（）;
}）;
}，function（）{
//循环完成后调用
map.fitBounds（latlngbounds）;
}）;
函数asyncLoop（iterations，func，callback）{
var index = 0;
var done = false;
var loop = {
next：function（）{
if（done）{
return;
}
if（index
func（loop）;
} else {
done = true;
callback（）;
}
}，
迭代：function（）{
return index - 1;
}，
break：function（）{
done = true;
callback（）;
}
};
loop.next（）;
返回循环;
}
Following code works ok, except that it not zoom to the given points.
If I take the Latlng direct it works, without convert the address to 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'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);
}
});
}
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;
}
example has been updated: fiddle of the working code.
这篇关于带有fitBounds的Google地图不会缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
