如何在初始加载时显示谷歌地图中的所有标记?

时间:2013-04-02 11:05:42

标签: google-maps google-maps-api-3

我开发了一个项目,显示带有多个标记的谷歌地图。我的问题是并非所有标记都显示在初始加载上。即。如果我有四个标记,当地图最初加载时,地图中只有2个可见。我必须缩小以查看其余的标记。

我该如何解决这个问题?

这是我通过javascript获取Googlemap的代码

window.onload=function(){                  
        var mapOptions={                 
            center:new google.maps.LatLng(markers[0].lat,markers[0].lng),                
            mapTypeId:google.maps.MapTypeId.ROADMAP        
        };
        var infoWindow=new google.maps.InfoWindow();
        var map=new google.maps.Map(document.getElementById("dvMap"),mapOptions);
        var bounds=new google.maps.LatLngBounds();
        for(i=0;i<markers.length;i++){                
            var data=markers[i];
            var latlng=new google.maps.LatLng(data.lat,data.lng);
            var marker=new google.maps.Marker({
                position:latlng,
                map:map,
                title:data.title             
            });
            (function(marker,data){
                google.maps.event.addListener(marker,"click",function(e){
                    infoWindow.setContent(data.description);
                    infoWindow.open(map,marker);
                });                
            })(marker,data);                
        } 
    }       

2 个答案:

答案 0 :(得分:2)

自从我使用谷歌地图API工作已经有一段时间了,但我相信你需要的是:

var bounds = new google.maps.LatLngBounds ();

//  Go through each...
for (var i = 0, LtLgLen = LatLngList.length; i < LtLgLen; i++) {
  //  And increase the bounds to take this point
  bounds.extend (LatLngList[i]);
}

//  Fit these bounds to the map
map.fitBounds (bounds);

您已经定义了bounds数组并循环标记,只需将每个标记添加到bounds数组,然后再添加fitBounds。

有关原始文章,请参阅http://blog.shamess.info/2009/09/29/zoom-to-fit-all-markers-on-google-maps-api-v3/

答案 1 :(得分:1)

for(i=0;i<markers.length;i++){                
            var data=markers[i];
            var latlng=new google.maps.LatLng(data.lat,data.lng);
            var marker=new google.maps.Marker({
                position:latlng,
                map:map,
                title:data.title             
            });
            bounds.extend(marker); // here is the code to add every marker plotted on bounds
            (function(marker,data){
                google.maps.event.addListener(marker,"click",function(e){
                    infoWindow.setContent(data.description);
                    infoWindow.open(map,marker);
                });                
            })(marker,data);                
        } 
map.setCenter(latlngbounds.getCenter()); // this will set the center of map to center of all markers
map.fitBounds(latlngbounds); // this will fit all the markers to screen