将不同的信息窗口附加到多边形组谷歌地图

Question

现在我的代码如下所示：

   // create a LatLng array out of given coordinates string
  for (var i = 0; i < coordinateString.length; i++) {
    var polygonCoords = new Array();
    var j = 0;
    var z = j + 1;
    while (z < coordinate.length) 
    {
      if ((j%2) === 0) 
      {
        var coord1 = parseFloat(coord[z]);
        var coord2 = parseFloat(coord[j]);
        var newLatLng = new google.maps.LatLng(coord1,coord2);
        polygonCoords.push(newLatLng);
        } else 
        {
            var coord1 = parseFloat(coord[j]);
            var coord2 = parseFloat(coord[z]);
            var newLatLng = new google.maps.LatLng(coord1,coord2);
            polygonCoords.push(newLatLng);
        }
    z++;
    j++;
    }

    /** Adds the polygon to a polygon array
    * and maps it onto the map
    */

         var newPoly = new google.maps.Polygon(
          {
            paths: polygonCoords,
            strokeColor: objArray[i].borderColor,
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: objArray[i].fillColor,
            fillOpacity: 0.35
            })
          newPoly.setMap(map);
          newPoly.set("eventNum",objArray[i].eventID)
          newPoly.set("offTime", objArray[i].offTime)

           function attachInfoWindow(event) 
            {
              var infowindowPoly = new google.maps.InfoWindow();
              var eventNo = newPoly.get("eventNum");
              var outTime = newPoly.get("offTime");
              var resTime = objArray[i].restoreTime;
              var contentString = "Event Number: " + eventNo + "<br> Outage Time: " + outTime + "<br> Estimated Restoration Time: " + resTime;
              infowindowPoly.setContent(contentString);
              infowindowPoly.setPosition(event.latLng);
              infowindowPoly.open(map);
              google.maps.event.addListener(map, 'click', function() 
                {
                  infowindowPoly.close();
                });
            }
          google.maps.event.addListener(newPoly, 'click', attachInfoWindow); 
         }
       }

它会在不同的位置创建一个多边形数组（它是循环的，因此每次创建一个新的多边形并将其设置到地图时），单击时会弹出一个信息窗口并显示一些内容，但它是相同的内容。但是我想为每个多边形显示不同的信息窗口。我已经阅读了所有其他类似的问题和答案，并修改了我的代码。

请注意，我已将保存我想要的内容的对象存储到一个数组中，并使用索引和其他方式来获取对象的属性，然后将其显示为我的信息窗口内容。

Answer 1

这里的一个问题是您有一个变量i，每次通过循环都会更新，并且您在异步回调中使用该变量。但是该回调函数在循环完成后很长时间才被调用，因此i 没有您期望的值。

您可以通过为循环体创建一个函数并在每次循环中调用该函数来解决此问题。这样，函数内部定义的每个函数参数和变量对于该函数的特定调用都是本地的 - 因此它的值与您正在使用的单个多边形相匹配。

它可能看起来像这样：

      for (var i = 0; i<numOfPolygons; i++) {
          addPoly( objArray[i] );
      }

      function addPoly( source ) {
         var newPoly = new google.maps.Polygon(
          {
            paths: polygonCoords,
            strokeColor: source.borderCol,
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: source.fill,
            fillOpacity: 0.35
            })
          newPoly.setMap(map);
          newPoly.set("eventNum",source.eventID)
          newPoly.set("offTime", source.offTime)
           function attachInfoWindow(event) 
            {
              var infowindowPoly = new google.maps.InfoWindow();
              var eventNo = newPoly.get("eventNum");
              var outTime = newPoly.get("offTime");
              var resTime = source.restoreTime;
              var contentString = "Event Number: " + eventNo + "<br> Outage Time: " + outTime + "<br> Estimated Restoration Time: " + resTime;
              infowindowPoly.setContent(contentString);
              infowindowPoly.setPosition(event.latLng);
              infowindowPoly.open(map);
              google.maps.event.addListener(map, 'click', function() 
                {
                  infowindowPoly.close();
                });
            }
          google.maps.event.addListener(newPoly, 'click', attachInfoWindow); 
         }
       }

Answer 2

创建一个函数来返回点击监听函数。将索引和多边形传递给该函数，这样您就可以对它们进行函数闭包以保持它们的关联：

function attachInfoWindow(newPoly, i) {
    return function (event) {
        var eventNo = newPoly.get("eventNum");
        var outTime = newPoly.get("offTime");
        var resTime = objArray[i].restoreTime;
        var contentString = "Event Number: " + eventNo + "<br> Outage Time: " + outTime + "<br> Estimated Restoration Time: " + resTime;
        infowindowPoly.setContent(contentString);
        infowindowPoly.setPosition(event.latLng);
        infowindowPoly.open(map);
        google.maps.event.addListener(map, 'click', function () {
            infowindowPoly.close();
        });
    };
}

这样调用函数：

for (var i = 0; i < numOfPolygons; i++) {
    var newPoly = new google.maps.Polygon({
        paths: polygons[i],
        strokeColor: objArray[i].borderCol,
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: objArray[i].fill,
        fillOpacity: 0.35
    });
    newPoly.setMap(map);
    newPoly.set("eventNum", objArray[i].eventID);
    newPoly.set("offTime", objArray[i].offTime);

    google.maps.event.addListener(newPoly, 'click', attachInfoWindow(newPoly, i));
}

proof of concept fiddle

代码 sn-p：

function attachInfoWindow(newPoly, i) {
  return function(event) {
    var eventNo = newPoly.get("eventNum");
    var outTime = newPoly.get("offTime");
    var resTime = objArray[i].restoreTime;
    var contentString = "Event Number: " + eventNo + "<br> Outage Time: " + outTime + "<br> Estimated Restoration Time: " + resTime;
    infowindowPoly.setContent(contentString);
    infowindowPoly.setPosition(event.latLng);
    infowindowPoly.open(map);
    google.maps.event.addListener(map, 'click', function() {
      infowindowPoly.close();
    });
  };
}

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var bounds = new google.maps.LatLngBounds();
  var polygons = [];

  for (var j = 0; j < coordinateStrings.length; j++) {
    var coordinates = coordinateStrings[j].split(" ");
    var polygonCoords = [];
    for (var i = 0; i < coordinates.length; i++) {
      var point = coordinates[i].split(",");
      var latlng = new google.maps.LatLng(parseFloat(point[1]), parseFloat(point[0]));
      bounds.extend(latlng);
      polygonCoords.push(latlng);
    }
    polygons.push(polygonCoords);
  }

  /** Adds the polygon to a polygon array
   * and maps it onto the map
   */
  var numOfPolygons = objArray.length;

  for (var i = 0; i < numOfPolygons; i++) {
    var newPoly = new google.maps.Polygon({
      paths: polygons[i],
      strokeColor: objArray[i].borderCol,
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: objArray[i].fill,
      fillOpacity: 0.35
    });
    newPoly.setMap(map);
    newPoly.set("eventNum", objArray[i].eventID);
    newPoly.set("offTime", objArray[i].offTime);


    google.maps.event.addListener(newPoly, 'click', attachInfoWindow(newPoly, i));
  }
  map.fitBounds(bounds);
}

google.maps.event.addDomListener(window, "load", initialize);
var geocoder;
var map;
var infowindowPoly = new google.maps.InfoWindow();
var objArray = [{
  borderCol: "#FF0000",
  fill: "#FF0000",
  eventID: 1,
  offTime: "12:10"
}, {
  borderCol: "#0000FF",
  fill: "#0000FF",
  eventID: 2,
  offTime: "12:00"
}, {
  borderCol: "#00FF00",
  fill: "#00FF00",
  eventID: 3,
  offTime: "12:20"
}];
var coordinateStrings = ["-82.4908447265625,42.99058552185121,0 -82.52174377441406,43.013182961445914,0 -82.42286682128906,43.02573350308799,0 -82.38578796386719,42.98958099829517,0 -82.452392578125,42.96596996868038,0 -82.45857238769531,42.99359899401497,0",
  "-82.33840942382812,42.96094517567432,0 -82.33016967773438,43.014689161895184,0 -82.23129272460938,43.04079076668198,0 -82.23197937011719,42.954412331213284,0",
  "-82.4139404296875,43.062868070571454,0 -82.38372802734375,43.014689161895184,0 -82.22442626953125,43.06387139555526,0 -82.276611328125,43.15209968803547,0 -82.37411499023438,43.141078106345844,0"
];

html,
body,
#map_canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>