javascript - 谷歌地图 API : Rectangle and InfoWindow coupling issue

Question

我想在 Google map 上添加一系列矩形，每个矩形都与一个信息窗口配对。在我的 fiddle ，我可以点击 map 上的任意位置来添加一个矩形。然后我会点击任何一个单独的矩形来添加一个信息窗口。一切都按预期工作。

这是一个我遇到问题的简单场景:

1. 在 map 上的任意位置创建一个矩形。
2. 单击您刚刚创建的矩形以附加信息窗口。
3. 当第一个矩形和 infoWindow 仍然打开时，创建另一个矩形。
4. 单击第二个矩形以附加信息窗口。
5. 单击“x”关闭第一个矩形的信息窗口。
6. 尝试通过单击矩形再次打开该信息窗口。它不起作用。

如果我关闭第二个矩形的信息窗口，然后单击第一个矩形，将弹出附加到第二个矩形的信息窗口。所以，我想显然存在某种配对问题，我需要手动管理。如何解决这个问题？

JavaScript:

var infoWindow = null,
    rectangle = null,
    bounds, map,
    mapOptions = {
        center: new google.maps.LatLng(38.822270, -77.061024),
        mapTypeId: google.maps.MapTypeId.TERRAIN,
        zoom: 13
    };
map = new google.maps.Map(document.getElementById('map-container'), mapOptions);

google.maps.event.addListener(map, 'click', function(event) {
    var ne_lat = event.latLng.lat() + 0.005,
        ne_lng = event.latLng.lng() + 0.01,
        sw_lat = event.latLng.lat() - 0.005,
        sw_lng = event.latLng.lng() - 0.01;
    bounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(sw_lat, sw_lng),
        new google.maps.LatLng(ne_lat, ne_lng)
    );
    rectangle = new google.maps.Rectangle({
        bounds: bounds,
        editable: true,
        draggable: true
    });
    rectangle.setMap(map);
    infoWindow = new google.maps.InfoWindow();
    infoWindow.setPosition(rectangle.getBounds().getNorthEast());
    infoWindow.setContent("Hello world!");

    google.maps.event.addListener(rectangle, 'click', function() {
        infoWindow.open(map);
    });
});

Answer 1

使用函数闭包将 InfoWindow 与矩形相关联:

function createClickablePoly(poly, html, map) {
    var contentString = html;
    var infoWindow = new google.maps.InfoWindow();
    google.maps.event.addListener(poly,'click', function(event) {
      infoWindow.setContent(contentString);
      infoWindow.setPosition(event.latLng);
      infoWindow.open(map);
    }); 
}

这样调用它:

function initialize() {
    var infoWindow = null,
        rectangle = null,
        bounds, map,
        mapOptions = {
            center: new google.maps.LatLng(38.822270, -77.061024),
            mapTypeId: google.maps.MapTypeId.TERRAIN,
            zoom: 13
        };
    map = new google.maps.Map(document.getElementById('map-container'), mapOptions);

    google.maps.event.addListener(map, 'click', function(event) {
        var ne_lat = event.latLng.lat() + 0.005,
            ne_lng = event.latLng.lng() + 0.01,
            sw_lat = event.latLng.lat() - 0.005,
            sw_lng = event.latLng.lng() - 0.01;
        bounds = new google.maps.LatLngBounds(
            new google.maps.LatLng(sw_lat, sw_lng),
            new google.maps.LatLng(ne_lat, ne_lng)
        );
        rectangle = new google.maps.Rectangle({
            bounds: bounds,
            editable: true,
            draggable: true
        });
        rectangle.setMap(map);
        infoWindow = new google.maps.InfoWindow();
        createClickablePoly(rectangle, "hello world", map);

    });
}

工作代码片段:

function initialize() {
  var infoWindow = null,
    rectangle = null,
    bounds, map,
    mapOptions = {
      center: new google.maps.LatLng(38.822270, -77.061024),
      mapTypeId: google.maps.MapTypeId.TERRAIN,
      zoom: 13
    };
  map = new google.maps.Map(document.getElementById('map-container'), mapOptions);

  google.maps.event.addListener(map, 'click', function(event) {
    var ne_lat = event.latLng.lat() + 0.005,
      ne_lng = event.latLng.lng() + 0.01,
      sw_lat = event.latLng.lat() - 0.005,
      sw_lng = event.latLng.lng() - 0.01;
    bounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(sw_lat, sw_lng),
      new google.maps.LatLng(ne_lat, ne_lng)
    );
    rectangle = new google.maps.Rectangle({
      bounds: bounds,
      editable: true,
      draggable: true
    });
    rectangle.setMap(map);
    infoWindow = new google.maps.InfoWindow();
    createClickablePoly(rectangle, "hello world", map);

  });
}

function createClickablePoly(poly, html, map) {
  var contentString = html;
  var infoWindow = new google.maps.InfoWindow();
  google.maps.event.addListener(poly, 'click', function(event) {
    infoWindow.setContent(contentString);
    infoWindow.setPosition(event.latLng);
    infoWindow.open(map);
  });
}
$(document).ready(function() {
  initialize();
});

html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0, padding: 0;
}
#map-container {
  border: 2px solid red;
  height: 95%;
  width: 95%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
<div id='map-container'></div>