Question

我很难解决这个问题，我在这里和互联网上看了一些例子，但仍然无法让它发挥作用。我有一个谷歌v3地图，在英国各地显示了许多标记。我希望能够设置缩放级别以覆盖所选区域中的所有标记，例如。伦敦可能有50个标记，而格拉斯哥可能有2个...具有相同的缩放级别，两者在格拉斯哥页面看起来有点奇怪。我已经阅读了一些关于getBounds（）方法的内容，但我不知道在我的脚本中何处以及如何实现它。任何帮助，将不胜感激。到目前为止，这是我的代码。

var gmarkers=[];
var map=null;

function initialize(){

var myOptions={

    zoom:10,<!--would this still be needed-->
    center:new google.maps.LatLng(parseFloat(gmapcentrelat),parseFloat(gmapcentrelong)),                                            mapTypeControl:true,
    mapTypeControlOptions:{style:google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl:true,
    mapTypeId:google.maps.MapTypeId.ROADMAP
};
        map=new google.maps.Map(document.getElementById("map_canvas"),
                                        myOptions);


        google.maps.event.addListener(map, 'click', function() {
        infowindow.close()

    });

        // Read the data from example.xml
        downloadUrl(gmapfile,function(doc){
        var xmlDoc=xmlParse(doc);
        var markers=xmlDoc.documentElement.getElementsByTagName("hotel");
        for(var i=0;i<markers.length;i++){

        // obtain the attribues of each marker
        var lat=parseFloat(markers[i].getAttribute("lat"));
        var long=parseFloat(markers[i].getAttribute("long"));
        var point=new google.maps.LatLng(lat,long);
        var star=(markers[i].getAttribute("star"));

        var star_html='';

        if(star>1)
                {star_html='<img src="" alt="star" /><br />'}

                var hotel_id=(markers[i].getAttribute("id"));
                var hotel_name=(markers[i].getElementsByTagName("given_name")[0].firstChild.nodeValue);
                var country=(markers[i].getAttribute("country_id"));
                var city=(markers[i].getAttribute("city_id"));
                var location=(markers[i].getAttribute("location"));
                var filetxt=(markers[i].getAttribute("file_name"));
                var countrytxt=(markers[i].getAttribute("country_name"));
                    countrytxt=countrytxt.toLowerCase();
                    countrytxt=countrytxt.replace(" ","_");
                var citytxt=(markers[i].getAttribute("city_name"));
                    citytxt=citytxt.toLowerCase();
                    citytxt=citytxt.replace(" ","_");

                var html='';

        // create the marker        
        var marker=createMarker(point,html,star,hotel_id)

    }
})
};

    var infowindow=new google.maps.InfoWindow(
{
        size:new google.maps.Size(150,50)
});

function myclick(i){
        google.maps.event.trigger(gmarkers[i],"click")
};

function createMarker(latlng,html,star,hotel_id){
    var contentString=html;
    var marker=new google.maps.Marker({
        position:latlng,
        map:map,

        icon:'http://'+servername+'hotels/graphics/red_'+star+'_star.png',
        zIndex:Math.round(latlng.lat()*-100000)<<5
        });

        google.maps.event.addListener(marker,'click',function(){
        infowindow.setContent(contentString);
        infowindow.open(map,marker)});
        gmarkers[hotel_id]=marker};

Answer 1

使用LatLngBounds。extend（）和Map。fitBounds（）。在下面，fullBounds矩形将增长，以在您创建它们时包含您的标记。然后，在完成标记创建后，只需将地图拟合到该矩形即可。

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

for(var i=0;i<markers.length;i++){
  var lat=parseFloat(markers[i].getAttribute("lat"));
  var long=parseFloat(markers[i].getAttribute("long"));
  var point=new google.maps.LatLng(lat,long);

  fullBounds.extend(point);

  ...

}

map.fitBounds(fullBounds);

Google缩放以适应该页面上的所有标记

1 个答案: