Question

我想在Google地图上添加一系列矩形，每个矩形都与infoWindow配对。在我的 fiddle 中，我可以点击地图上的任意位置添加一个矩形。然后我会点击任何单个矩形来添加一个infoWindow。这一切都按预期工作。

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

在地图上的任意位置创建一个矩形。
单击您刚创建的矩形以附加infoWindow。
当第一个矩形和infoWindow仍处于打开状态时，请创建另一个矩形。
单击第二个矩形以附加infoWindow。
点击＆＃39; x＆＃39;关闭FIRST矩形的infoWindow。
点击矩形，再次尝试打开infoWindow。它没有用。

如果我关闭SECOND矩形的infoWindow，然后单击FIRST矩形，将弹出附加到SECOND矩形的infoWindow。所以，我猜这显然是某种配对问题，我需要手动管理。怎么会解决这个问题？

的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>

Google Maps API：Rectangle和InfoWindow耦合问题

1 个答案: