GoogleMaps API：矩形和InfoWindow耦合问题 [英] GoogleMaps API: Rectangle and InfoWindow coupling issue

问题描述

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

I would like to add a series of rectangles on a Google map, each of which is to be paired with a infoWindow. In my fiddle, I can click anywhere on the map to add a rectangle. Then I would click on any individual rectangle to add a infoWindow. It all works as intended.

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

Here's a simple scenario where I run into a problem:

1. 在地图上的任何地方创建一个矩形。


2. 单击刚创建的用于附加infoWindow的矩形。 和infoWindow仍然打开，创建另一个矩形。


3. 单击第二个矩形以附加infoWindow。


4. 关闭FIRST矩形的infoWindow，点击'x'。


5. 尝试点击矩形再次打开infoWindow。它不起作用。

1. Create a rectangle anywhere on the map.
2. Click on the rectangle you just created to attach a infoWindow.
3. While the first rectangle and infoWindow are still open, create another rectangle.
4. Click on the second rectangle to attach a infoWindow.
5. Close the infoWindow of the FIRST rectangle by clicking on the 'x'.
6. Try opening that infoWindow again by clicking on the rectangle. It doesn't work.

如果关闭SECOND矩形的infoWindow，然后单击第一个矩形，附加的infoWindow第二个矩形会弹出。所以，我想这显然是某种配对问题，我需要手动管理。如何解决这个问题？

If I close the infoWindow of the SECOND rectangle, then click on the FIRST rectangle, the infoWindow attached to the SECOND rectangle would pop up. So, I guess there's apparently some sort of pairing issue, which I would need to manage manually. How would go about tackling this?

JavaScript ：

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

推荐答案

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

Use function closure to associate the InfoWindow with the rectangle:

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>

这篇关于GoogleMaps API：矩形和InfoWindow耦合问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！