Google缩放以适合该页面上的所有标记 [英] Google zooming to fit all markers on that page

问题描述

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

  var gmarkers = []; 
 var map = null; 
 
函数initialize（）{
 
 var myOptions = {
 
 zoom：10，<！ - 这仍然是需要的 - > ; 
 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）; 
 
 $ b google.maps.event.addListener（map，'click'，function（）{
 infowindow.close（）
 
}）; 
 
 //从example.xml读取数据
 downloadUrl（gmapfile，function（doc）{
 var xmlDoc = xmlParse（doc）; 
 var markers = xmlDoc .documentElement.getElementsByTagName（hotel）; 
 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）; 
 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 =（标记[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 =''; 
 
 //创建标记
 var marker = createMarker（point，html，star，hotel_id）
 
} 
}）
} ; 
 
 var infowindow = new google.maps.InfoWindow（
 {
 size：new google.maps.Size（150,50）
}）; 
 
函数myclick（i）{
 google.maps.event.trigger（gmarkers [i]，click）
}; 
 
函数createMarker（latlng，html，star，hotel_id）{
 var contentString = html; 
 var marker = new google.maps.Marker（{
 position：latlng，
 map：map，
 
 icon：'http：//'+ servername +'酒店/图形/红色_'+星+'_星_.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}; 
  

解决方案

使用LatLngBounds .extend（）和Map 的.fitBounds（）。在下面，fullBounds矩形会随着你的标记的增长而增长。然后，在完成标记的创建之后，将地图简单地贴到该矩形。

  var fullBounds = new google.maps.LatLngBounds （）; （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）; 
  

im having difficulties figuring this out, ive looked at examples here and on the internet but still cant manage to get it to work. I have a Google v3 map which displays a number of markers across the UK. Id like to be able to set the zoom level to cover all the markers in the area selected eg. London might have 50 markers and Glasgow may have 2...having the same zoom level for both would look slightly odd on the Glasgow page. I've read a little about the getBounds() method, but im not sure where and how to implemented it in my script. Any help would be appreciated. This is my code so far.

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};

解决方案

Make use of LatLngBounds.extend() and Map.fitBounds(). Below, the fullBounds rectangle will grow to include your markers as you create them. Then, simply fit the map to that rectangle when you are done creating your markers.

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缩放以适合该页面上的所有标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！