PanTo多个标记 [英] PanTo multiple markers

问题描述

如果我从外部源加载新的标记，它看起来像这样：

  var markersArray = []; 
 
 downloadUrl（eventsxml.php，function（data）{
 var xml = data.responseXML; 
 var markers = xml.documentElement.getElementsByTagName（marker）; 
 for（var i = 0; i< markers.length; i ++）{
 var name = markers [i] .getAttribute（id）; 
 var address = markers [i ] .getAttribute（id）; 
 var type = markers [i] .getAttribute（venue_type）; 
 var point = new google.maps.LatLng（
 parseFloat（markers [ i] .getAttribute（lat）），
 parseFloat（markers [i] .getAttribute（lng）））; 
 var html =< b>+ name +< / b>< br />+ address; 
 var icon = customIcons [type] || {}; 
 var marker = new google.maps.Marker（{
 map： map，
 position：point，
 icon：icon.icon，
 shadow：icon.shadow 
 
}）; 
 markersArray.push（marker） ; 
 bin dInfoWindow（marker，map，infoWindow，html）; 
} 
}）; 
  

如何收集标记的边界，然后将它们全部放到视图中，重新加载？我在google上搜索了很多，但没有一个解决方案适用于我。

一个空白边界对象（ google.maps.LatLngBounds ）

将所有标记添加到它中

用它来居中放大地图

类似这样：

  var markersArray = []; 
 //创建一个空的边界对象
 var bounds = new google.maps.LatLngBounds（）; 
 
 downloadUrl（eventsxml.php，function（data）{
 var xml = data.responseXML; 
 var markers = xml.documentElement.getElementsByTagName（marker）; 
 for（var i = 0; i< markers.length; i ++）{
 var name = markers [i] .getAttribute（id）; 
 var address = markers [i ] .getAttribute（id）; 
 var type = markers [i] .getAttribute（venue_type）; 
 var point = new google.maps.LatLng（
 parseFloat（markers [ i] .getAttribute（lat）），
 parseFloat（markers [i] .getAttribute（lng）））; 
 
 //将每个标记的位置添加到边界
 bounds.extend（point）; 
 var html =< b>+ name +< / b>< br />+ address; 
 var icon = customIcons [类型] || {}; 
 var marker = new google.maps.Marker（{
 map：map，
 position：point，
 icon：icon.icon，
 shadow：icon.shadow 
 
}）; 
 markersArray.push（mar KER）; 
 bindInfoWindow（marker，map，infoWindow，html）; 
} 
 //居中放大地图以适合边界
 map.fitBounds（bounds）; 
}）; 
  

要平移到边界的中心，而不是fitBounds，请使用：

  map.panTo（bounds.getCenter（））; 
  

请注意，这不会改变地图的缩放级别。

say I load new markers from an external source, it looks like this:

var markersArray = [];

downloadUrl("eventsxml.php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("id");
          var address = markers[i].getAttribute("id");
          var type = markers[i].getAttribute("venue_type");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b> <br/>" + address;
          var icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
            shadow: icon.shadow

          });
          markersArray.push(marker);
          bindInfoWindow(marker, map, infoWindow, html);
        }
      });

How would I go about gathering the bounds for the markers and then panning them all into view once they're loaded? I did so much searching on google but none of those solutions have worked for me.

解决方案

1. create an empty bounds object (a google.maps.LatLngBounds)
2. add all your markers to it
3. use it to center and zoom your map

Something like this:

var markersArray = [];
// create an empty bounds object
var bounds = new google.maps.LatLngBounds();

downloadUrl("eventsxml.php", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var name = markers[i].getAttribute("id");
      var address = markers[i].getAttribute("id");
      var type = markers[i].getAttribute("venue_type");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));

      // add each marker's location to the bounds
      bounds.extend(point);
      var html = "<b>" + name + "</b> <br/>" + address;
      var icon = customIcons[type] || {};
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon.icon,
        shadow: icon.shadow

      });
      markersArray.push(marker);
      bindInfoWindow(marker, map, infoWindow, html);
    }
    // center and zoom the map to fit the bounds
    map.fitBounds(bounds);
  });

To panTo the center of that bounds, instead of fitBounds, use:

map.panTo(bounds.getCenter());

Note that that will not change the zoom level of the map.

这篇关于PanTo多个标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！