PanTo多个标记

Question

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

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

我将如何收集标记的边界，然后在加载标记后将其全部平移到视图中？我在Google上进行了很多搜索，但是这些解决方案都没有对我有用。

Answer 1

1. 创建一个空边界对象（google.maps.LatLngBounds）
2. 将所有标记添加到它
3. 用它来居中和缩放地图

像这样：

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

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

map.panTo(bounds.getCenter());

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