Google Maps API v3 将事件绑定到多个地图

Question

我有一个页面，上面有两张 Google 地图，使用的是 v3 API。目前他们各有一个图钉，每个图钉都设置了相同的经纬度，尽管其中一张地图将在以后添加其他图钉（当我可以让它工作时！）地图是通过循环生成的对象，因此可以在需要时简单地添加更多地图。

我想要做的是将bounds_changed 事件绑定到两个地图，在map.fitBounds() 运行后运行map.setZoom()。但是，该事件仅绑定到要设置的最后一张地图，因此不会重置第一张地图的缩放。

链接到 JSFiddle 复制问题：http://jsfiddle.net/pkhb8mvz/7/

（有关事件绑定的更清晰示例，请将事件更改为侦听 click 而不是 bounds_changed，然后尝试单击第一张地图并观察第二张地图上的缩放级别变化）

非常感谢任何帮助！

Answer 1

问题在于 map 变量在循环的每次迭代中都被重新定义，因此当您的事件侦听器回调运行时，它将在第二个 google.maps.Map 对象上运行。最简单的解决方案是使用闭包在每次迭代中捕获map 变量的值，如下所示：

(function (map) {
    var listener = new google.maps.event.addListenerOnce(map, "bounds_changed", function () {
        if (!opts.center) {
            map.setZoom(opts.zoom);
        };
    });
}) (map);

我 fork 你的 JSFiddle 来展示这个想法：https://jsfiddle.net/e8qbr8qL/

Answer 2

创建了这个fiddle，它基于这个答案https://stackoverflow.com/a/5839041/2321666工作。

除了你需要添加的函数之外，你的地图变量应该是一个数组，这样每个地图都有一个实例。

map[i] = new google.maps.Map($(maps[i].mapElement)[0], opts);

如果您需要对代码的任何解释，请询问，但我认为添加的帖子中有足够的关于 javascript 闭包的信息。

Answer 3

除非您保留对所有地图的引用，否则您无法将侦听器添加到多个地图，目前您只保留对最后创建的地图的引用。

    // use function closure to associate the map with its bounds listener
    addBoundsListener(map, opts, bounds);
    map.fitBounds(bounds);
}

function addBoundsListener(map, opts, bounds) {
    // If no center option has been specified, center the map to
    // contain all pins and reset the zoom
    var listener = new google.maps.event.addListenerOnce(map, "bounds_changed", function () {
        if (!opts.center) {
            map.setZoom(opts.zoom);
        }
    });
}

updated fiddle

代码sn-p：

var maps = {
  "propertyLocation": {
    "mapElement": "#map1",
    "options": {
      "zoom": 10,
      "streetViewControl": false
    },
    "pins": [{
      "title": "Test 1",
      "lat": "52.1975331616",
      "long": "0.9771180153"
    }]
  },
  "localArea": {
    "mapElement": "#map2",
    "options": {
      "zoom": 14,
      "streetViewControl": false
    },
    "pins": [{
      "title": "Test 2",
      "lat": "52.1975331616",
      "long": "0.9771180153"
    }]
  }
};

// Sensible defaults
var defaults = {
  zoom: 9,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  draggable: true
};

for (var i in maps) {
  // Extend the options
  var opts = $.extend(true, defaults, maps[i].options),
    marker,
    map,
    bounds = new google.maps.LatLngBounds();

  // Create the map
  map = new google.maps.Map($(maps[i].mapElement)[0], opts);

  // Create all pins
  for (var p = 0; p < maps[i].pins.length; p++) {
    var pin = maps[i].pins[p];
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(pin.lat, pin.long),
      map: map,
      title: pin.title,
      icon: pin.icon
    });

    // Extend the bounds of the map to contain the marker
    bounds.extend(marker.position);
  }
  // use function closure to associate the map with its bounds listener
  addBoundsListener(map, opts, bounds);
  map.fitBounds(bounds);
}

function addBoundsListener(map, opts, bounds) {
  // If no center option has been specified, center the map to
  // contain all pins and reset the zoom
  var listener = new google.maps.event.addListenerOnce(map, "bounds_changed", function() {
    if (!opts.center) {
      map.setZoom(opts.zoom);
    }
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>
<div style="width: 500px; height: 500px;" id="map1"></div>
<div style="width: 500px; height: 500px;" id="map2"></div>