Google 地图 API 多边形信息窗口出现在上次单击的标记上

Question

我的地图上显示了一组标记和多边形，每个标记和多边形都存储在一个单独的数组中。目前，我将信息窗口绑定到我的标记上，我想将信息窗口添加到我的多边形中，以防用户点击它们。标记信息窗口完美运行。

问题是，当您单击多边形时，信息窗口不会弹出，除非您先单击了标记。然后，多边形信息窗口将出现在最后单击的标记上。

我已经完成了每一行相关代码。我认为问题在于信息窗口专门绑定到标记图标，但我不知道如何分离它。我对 JS 比较陌生，这是我第一个正在进行的主要项目。

var map;
var mapCenter = { lat: 28.201890, lng: -81.027334 };

var mPoint = "/images/placemark_circle_highlight.png";

var locations = [];
var locationsPoly = [];

var markers = [];
var infos = [];

var polygons = [];
var polyInfos = [];

var infowindow;

var testInfoWindow1 =
  '<div id="content">' +
  '<h1 class="header">Test Marker #1</h1>' +
  '<div class="desc">' +
  "<p>This is a marker at position number 1.</p>" +
  "</div>" +
  "</div>";

var testInfoWindow2 =
  '<div id="content">' +
  '<h1 class="header">Test Marker #2</h1>' +
  '<div class="desc">' +
  "<p>This is a marker at position number 2.</p>" +
  "</div>" +
  "</div>";

var testInfoWindow3 =
  '<div id="content">' +
  '<h1 class="header">Test Marker #3</h1>' +
  '<div class="desc">' +
  "<p>This is a marker at position number 3.</p>" +
  "</div>" +
  "</div>";

var testInfoWindow4 =
  '<div id="content">' +
  '<h1 class="header">Test Marker #4</h1>' +
  '<div class="desc">' +
  "<p>This is a marker at position number 4.</p>" +
  "</div>" +
  "</div>";

var testInfoWindow5 =
  '<div id="content">' +
  '<h1 class="header">Test Marker #5</h1>' +
  '<div class="desc">' +
  "<p>This is a marker at position number 5.</p>" +
  "</div>" +
  "</div>";

var pOneDesc =
  '<div id="content">' +
  '<h1 class="header">#1 Polygon Window</h1>' +
  '<div class="desc">' +
  "<p>Lorem.</p>" +
  "</div>" +
  "</div>";

var pTwoDesc =
  '<div id="content">' +
  '<h1 class="header">#2 Polygon Window</h1>' +
  '<div class="desc">' +
  "<p>elementum pulvinar etiam.</p>" +
  "</div>" +
  "</div>";

var pThreeDesc =
  '<div id="content">' +
  '<h1 class="header">#3 Polygon Window</h1>' +
  '<div class="desc">' +
  "<p>orci eu lobortis elementum nibh tellus molestie.</p>" +
  "</div>" +
  "</div>";

function initMap() {
  var myOptions = {
    zoom: 15,
    center: mapCenter,
    mapTypeControl: true,
    streetViewControl: false,
    mapTypeId: google.maps.MapTypeId.TERRAIN,
  };

  map = new google.maps.Map(document.getElementById("map"),
    myOptions);

  locations = [
    ["Test Marker #1", 28.210862, -81.038192, testInfoWindow1, mPoint, 'category1'],
    ["Test Marker #2", 28.206477, -81.016176, testInfoWindow2, mPoint, 'category1'],
    ["Test Marker #3", 28.216659, -81.029092, testInfoWindow3, mPoint, 'category1'],
    ["Test Marker #4", 28.195328, -81.044638, testInfoWindow4, mPoint, 'category1'],
    ["Test Marker #5", 28.196439, -81.006932, testInfoWindow5, mPoint, 'category1']
  ];

  var polygonOne = [
    [28.187985, -81.045365],
    [28.183579, -81.045365],
    [28.183579, -81.041156],
    [28.187922, -81.041341]
  ];
  var pointsPolyOne = [];
  for (var i = 0; i < polygonOne.length; i++) {
    pointsPolyOne.push({
      lat: polygonOne[i][0],
      lng: polygonOne[i][1]
    });
  }

  var polygonTwo = [
    [28.185258, -81.033373],
    [28.183601, -81.030751],
    [28.187809, -81.026072]
  ];
  var pointsPolyTwo = [];
  for (var i = 0; i < polygonTwo.length; i++) {
    pointsPolyTwo.push({
      lat: polygonTwo[i][0],
      lng: polygonTwo[i][1]
    });
  }

  var polygonThree = [
    [28.189691, -81.032381],
    [28.188111, -81.032337],
    [28.188291, -81.031608],
    [28.189719, -81.031276]
  ];
  var pointsPolyThree = [];
  for (var i = 0; i < polygonThree.length; i++) {
    pointsPolyThree.push({
      lat: polygonThree[i][0],
      lng: polygonThree[i][1]
    });
  }

  locationsPoly = [
    [pointsPolyThree, pOneDesc, "#f44336", 0.8, 2, "#ffffff", 0.35, 'FY19'],
    [pointsPolyTwo, pTwoDesc, "#4caf50", 0.8, 2, "#bdeabf", 0.35, 'FY19'],
    [pointsPolyOne, pThreeDesc, "#849199", 0.8, 2, "#ffffff", 0.35, 'FY19']
  ];

  infowindow = new google.maps.InfoWindow();

  setMarkers(map, locations);
  setPolygons(map, locationsPoly);

}

function setMarkers(map, locations) {
  var marker, i
  for (i = 0; i < locations.length; i++) {
    var title = locations[i][0];
    var lat = locations[i][1];
    var long = locations[i][2];
    var desc = locations[i][3];
    var pin = locations[i][4];
    var category = locations[i][5];

    latlngset = new google.maps.LatLng(lat, long);

    marker = new google.maps.Marker({
      map: map,
      title: title,
      position: latlngset,
      icon: pin,
      category: category
    });

    marker.mycategory = category;
    marker.myname = name;
    markers.push(marker);

    var content = desc;
    google.maps.event.addListener(marker, 'click', (function (marker, content) {
      return function () {
        /* close the previous info-window */
        closeInfos();
        infowindow.setContent(content);
        infowindow.setPosition(event.latlng);
        infowindow.open(map, marker);
        /* keep the handle, in order to close it on next click event */
        infos[0] = infowindow;
      };
    })(marker, content));
    google.maps.event.addListener(map, "click", function (marker, content) {
      closeInfos();
    });
  }
}

function setPolygons(map, locationsPoly) {
  var polygon, i
  for (i = 0; i < locationsPoly.length; i++) {
    var paths = locationsPoly[i][0];
    var polyDesc = locationsPoly[i][1];
    var strokeColor = locationsPoly[i][2];
    var strokeOpacity = locationsPoly[i][3];
    var strokeWeight = locationsPoly[i][4];
    var fillColor = locationsPoly[i][5];
    var fillOpacity = locationsPoly[i][6];
    var categoryPoly = locationsPoly[i][7];

    polygon = new google.maps.Polygon({
      map: map,
      paths: paths,
      strokeColor: strokeColor,
      strokeOpacity: strokeOpacity,
      strokeWeight: strokeWeight,
      fillColor: fillColor,
      fillOpacity: fillOpacity,
      category: categoryPoly
    });

    polygon.mycategory = categoryPoly;
    polygon.myname = name;

    polygons.push(polygon);

    var polyContent = polyDesc;
    google.maps.event.addListener(polygon, 'click', (function (polygon, polyContent) {
      return function () {
        /* close the previous info-window */
        closeInfos();
        infowindow.setContent(polyContent);
        infowindow.setPosition(getHighestWindowPosition(paths));
        infowindow.open(map, polygon);
        /* keep the handle, in order to close it on next click event */
        infos[0] = infowindow;
      };
    })(polygon, polyContent));
    google.maps.event.addListener(map, "click", function (marker, content) {
      closeInfos();
    });
  }
}

function getHighestWindowPosition(paths) {
  var lat = -5000, lng = 0, i = 0, n = paths.length;
  for (; i !== n; ++i) {
    if (paths[i].lat > lat) {
      lat = paths[i].lat;
      lng = paths[i].lng;
    }
  }
  return { lat: lat, lng: lng };
}

function closeInfos() {
  if (infos.length > 0) {
    /* detach the info-window from the marker ... undocumented in the API docs */
    infos[0].set("marker", "polygon", null);
    /* and close it */
    infos[0].close();
    /* blank the array */
    infos.length = 0;
  }
}

<!DOCTYPE html>
<html>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<head>
  <title>Test Map for Markers-Polygons</title>
  <script type="application/javascript" src="js/checkbox.js?rndstr=<%= getRandomStr() %>"></script>
  <style>
    #map {
      height: 100vh;
    }
    html,
    body {
      height: 100vh;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div id="map"></div>

  <script src="https://maps.googleapis.com/maps/api/js?key=##APIKEYHERE##&callback=initMap"
    async defer></script>

</body>
</html>

更新：最小可重现示例。信息窗口现在出现在一个多边形上，但只是数组中的第一个。

Answer 1

还有两个问题。

根据我的评论和相关问题：Open InfoWindow for each polygon google maps V3，InfoWindow.open 方法的第二个参数（如果存在）必须是 "anchor"（带有 position 属性)，google.maps.Polygon 对象不是。

infowindow.open(map, polygon);

应该是：

infowindow.open(map);

您正在 "click" 事件侦听器函数中使用 paths 变量，但您没有对其进行函数闭包（您仅对 polygon 和 polygonContent).

google.maps.event.addListener(polygon, 'click', (function (polygon, polyContent) {
  return function () {
    /* close the previous info-window */
    closeInfos();
    infowindow.setContent(polyContent);
    infowindow.setPosition(getHighestWindowPosition(paths));
    infowindow.open(map, polygon);
    /* keep the handle, in order to close it on next click event */
    infos[0] = infowindow;
  };
})(polygon, polyContent));

应该是：

google.maps.event.addListener(polygon, 'click', (function (polygon, polyContent, paths) {
  return function (evt) {
    /* close the previous info-window */
    closeInfos();
    infowindow.setContent(polyContent);
    infowindow.setPosition(getHighestWindowPosition(paths));
    infowindow.open(map);
    /* keep the handle, in order to close it on next click event */
    infos[0] = infowindow;
  };
})(polygon, polyContent, paths));

proof of concept fiddle

代码片段：

var map;
var mapCenter = {
  lat: 28.201890,
  lng: -81.027334
};

var mPoint = "/images/placemark_circle_highlight.png";

var locations = [];
var locationsPoly = [];

var markers = [];
var infos = [];

var polygons = [];
var polyInfos = [];

var infowindow;

var testInfoWindow1 =
  '<div id="content">' +
  '<h1 class="header">Test Marker #1</h1>' +
  '<div class="desc">' +
  "<p>This is a marker at position number 1.</p>" +
  "</div>" +
  "</div>";

var testInfoWindow2 =
  '<div id="content">' +
  '<h1 class="header">Test Marker #2</h1>' +
  '<div class="desc">' +
  "<p>This is a marker at position number 2.</p>" +
  "</div>" +
  "</div>";

var testInfoWindow3 =
  '<div id="content">' +
  '<h1 class="header">Test Marker #3</h1>' +
  '<div class="desc">' +
  "<p>This is a marker at position number 3.</p>" +
  "</div>" +
  "</div>";

var testInfoWindow4 =
  '<div id="content">' +
  '<h1 class="header">Test Marker #4</h1>' +
  '<div class="desc">' +
  "<p>This is a marker at position number 4.</p>" +
  "</div>" +
  "</div>";

var testInfoWindow5 =
  '<div id="content">' +
  '<h1 class="header">Test Marker #5</h1>' +
  '<div class="desc">' +
  "<p>This is a marker at position number 5.</p>" +
  "</div>" +
  "</div>";

var pOneDesc =
  '<div id="content">' +
  '<h1 class="header">#1 Polygon Window</h1>' +
  '<div class="desc">' +
  "<p>Lorem.</p>" +
  "</div>" +
  "</div>";

var pTwoDesc =
  '<div id="content">' +
  '<h1 class="header">#2 Polygon Window</h1>' +
  '<div class="desc">' +
  "<p>elementum pulvinar etiam.</p>" +
  "</div>" +
  "</div>";

var pThreeDesc =
  '<div id="content">' +
  '<h1 class="header">#3 Polygon Window</h1>' +
  '<div class="desc">' +
  "<p>orci eu lobortis elementum nibh tellus molestie.</p>" +
  "</div>" +
  "</div>";

function initMap() {
  var myOptions = {
    zoom: 13,
    center: mapCenter,
    mapTypeControl: true,
    streetViewControl: false,
    mapTypeId: google.maps.MapTypeId.TERRAIN,
  };

  map = new google.maps.Map(document.getElementById("map"),
    myOptions);

  locations = [
    ["Test Marker #1", 28.210862, -81.038192, testInfoWindow1, mPoint, 'category1'],
    ["Test Marker #2", 28.206477, -81.016176, testInfoWindow2, mPoint, 'category1'],
    ["Test Marker #3", 28.216659, -81.029092, testInfoWindow3, mPoint, 'category1'],
    ["Test Marker #4", 28.195328, -81.044638, testInfoWindow4, mPoint, 'category1'],
    ["Test Marker #5", 28.196439, -81.006932, testInfoWindow5, mPoint, 'category1']
  ];

  var polygonOne = [
    [28.187985, -81.045365],
    [28.183579, -81.045365],
    [28.183579, -81.041156],
    [28.187922, -81.041341]
  ];
  var pointsPolyOne = [];
  for (var i = 0; i < polygonOne.length; i++) {
    pointsPolyOne.push({
      lat: polygonOne[i][0],
      lng: polygonOne[i][1]
    });
  }

  var polygonTwo = [
    [28.185258, -81.033373],
    [28.183601, -81.030751],
    [28.187809, -81.026072]
  ];
  var pointsPolyTwo = [];
  for (var i = 0; i < polygonTwo.length; i++) {
    pointsPolyTwo.push({
      lat: polygonTwo[i][0],
      lng: polygonTwo[i][1]
    });
  }

  var polygonThree = [
    [28.189691, -81.032381],
    [28.188111, -81.032337],
    [28.188291, -81.031608],
    [28.189719, -81.031276]
  ];
  var pointsPolyThree = [];
  for (var i = 0; i < polygonThree.length; i++) {
    pointsPolyThree.push({
      lat: polygonThree[i][0],
      lng: polygonThree[i][1]
    });
  }

  locationsPoly = [
    [pointsPolyThree, pOneDesc, "#f44336", 0.8, 2, "#ffffff", 0.35, 'FY19'],
    [pointsPolyTwo, pTwoDesc, "#4caf50", 0.8, 2, "#bdeabf", 0.35, 'FY19'],
    [pointsPolyOne, pThreeDesc, "#849199", 0.8, 2, "#ffffff", 0.35, 'FY19']
  ];

  infowindow = new google.maps.InfoWindow();

  setMarkers(map, locations);
  setPolygons(map, locationsPoly);

}

function setMarkers(map, locations) {
  var marker, i
  for (i = 0; i < locations.length; i++) {
    var title = locations[i][0];
    var lat = locations[i][1];
    var long = locations[i][2];
    var desc = locations[i][3];
    var pin = locations[i][4];
    var category = locations[i][5];

    latlngset = new google.maps.LatLng(lat, long);

    marker = new google.maps.Marker({
      map: map,
      title: title,
      position: latlngset,
      // icon: pin,
      category: category
    });

    marker.mycategory = category;
    marker.myname = name;
    markers.push(marker);

    var content = desc;
    google.maps.event.addListener(marker, 'click', (function(marker, content) {
      return function() {
        /* close the previous info-window */
        closeInfos();
        infowindow.setContent(content);
        infowindow.setPosition(event.latlng);
        infowindow.open(map, marker);
        /* keep the handle, in order to close it on next click event */
        infos[0] = infowindow;
      };
    })(marker, content));
    google.maps.event.addListener(map, "click", function(marker, content) {
      closeInfos();
    });
  }
}

function setPolygons(map, locationsPoly) {
  var polygon, i
  for (i = 0; i < locationsPoly.length; i++) {
    var paths = locationsPoly[i][0];
    var polyDesc = locationsPoly[i][1];
    var strokeColor = locationsPoly[i][2];
    var strokeOpacity = locationsPoly[i][3];
    var strokeWeight = locationsPoly[i][4];
    var fillColor = locationsPoly[i][5];
    var fillOpacity = locationsPoly[i][6];
    var categoryPoly = locationsPoly[i][7];

    polygon = new google.maps.Polygon({
      map: map,
      paths: paths,
      strokeColor: strokeColor,
      strokeOpacity: strokeOpacity,
      strokeWeight: strokeWeight,
      fillColor: fillColor,
      fillOpacity: fillOpacity,
      category: categoryPoly
    });

    polygon.mycategory = categoryPoly;
    polygon.myname = name;

    polygons.push(polygon);

    var polyContent = polyDesc;
    google.maps.event.addListener(polygon, 'click', (function(polygon, polyContent, paths) {
      return function(evt) {
        /* close the previous info-window */
        closeInfos();
        infowindow.setContent(polyContent);
        infowindow.setPosition(getHighestWindowPosition(paths));
        infowindow.open(map);
        /* keep the handle, in order to close it on next click event */
        infos[0] = infowindow;
      };
    })(polygon, polyContent, paths));
    google.maps.event.addListener(map, "click", function(marker, content) {
      closeInfos();
    });
  }
}

function getHighestWindowPosition(paths) {
  console.log(paths);
  var lat = -5000,
    lng = 0,
    i = 0,
    n = paths.length;
  for (; i !== n; ++i) {
    if (paths[i].lat > lat) {
      lat = paths[i].lat;
      lng = paths[i].lng;
    }
  }
  console.log("lat=" + lat + " lng=" + lng);
  return {
    lat: lat,
    lng: lng
  };
}

function closeInfos() {
  if (infos.length > 0) {
    /* detach the info-window from the marker ... undocumented in the API docs */
    infos[0].set("marker", "polygon", null);
    /* and close it */
    infos[0].close();
    /* blank the array */
    infos.length = 0;
  }
}

html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

Google 地图 API 多边形信息窗口出现在上次单击的标记上

Google Maps API Polygon Infowindow Appears on Last Clicked Marker

javascript

google-maps-api-3