为多个多边形显示多个信息窗口的问题

Question

我在 google 地图 api 中显示多个多边形的多个信息窗口时遇到问题。生成了多个多边形，但是当我单击其中一个多边形时，信息窗口没有显示。

我已经在 Whosebug 中尝试了一些解决方案，但信息窗口仍然没有显示。

这是我的代码，希望有人能帮忙。

var locations = [
   ['2',
    -7.928363082196162,
    110.29961786496813,
    '#FF0000',
    '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h4 id="firstHeading" class="firstHeading">2</h4>'+
    '<h6>Test</h6>'+
    '<div id="bodyContent"><p>'+
    '<ul>'+
    '<li> address1' +
    '<li> name1' +
    '<li> <a href="#" target="_blank">Detail</a>' +
    '</ul></div></div>',
      [
         {lat:-7.928484678360535, lng:110.29984203643903},
         {lat:-7.928317314428722, lng:110.29931728739098},
         {lat:-7.928261526436312, lng:110.2993400861676},
         {lat:-7.928326612426706, lng:110.29984970588043}
      ]
   ],
   ['4',
    -7.929468936295299,
    110.29790183540183,
    '#FFFF00',
    '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h4 id="firstHeading" class="firstHeading">4</h4>'+
    '<h6>Test 2</h6>'+
    '<div id="bodyContent"><p>'+
    '<ul>'+
    '<li> address2' +
    '<li> name2' +
    '<li> <a href="#" target="_blank">Detail</a>' +
    '</ul></div></div>',
      [
         {lat:-7.92956324428696, lng:110.29753265447664},
         {lat:-7.929071779867816, lng:110.29795204300183},
         {lat:-7.929048809572604, lng:110.29787905276964},
         {lat:-7.928977631597796, lng:110.29787925026733},
         {lat:-7.928972162828607, lng:110.29773508202754},
         {lat:-7.929113352484229, lng:110.2977215078638},
         {lat:-7.929107592513504, lng:110.29744912881154}]
      ],
];

var latLng = new google.maps.LatLng(locations[0][1], locations[0][2]);

var map = new google.maps.Map(document.getElementById('map'), {
zoom: 16, //level zoom
scaleControl: true,
center:latLng,
mapTypeId: google.maps.MapTypeId.HYBRID
});

var infowindow = new google.maps.InfoWindow();
var line_locations, lahanPath, i;
for (i = 0; i < 2; i++) {
   line_locations = locations[i][5];
   lahanPath = new google.maps.Polygon({
       path: line_locations,
       geodesic: true,
       map:map,
       strokeColor: locations[i][3],
       strokeOpacity: 0.5,
       strokeWeight: 0.5,
       fillColor: locations[i][3],
       fillOpacity: 0.35
   });

google.maps.event.addListener(lahanPath, 'click', (function(lahanPath, i) {
return function() {
   infowindow.setContent(locations[i][4]);
   infowindow.open(map, lahanPath);
   }
})(lahanPath, i));

Answer 1

如果您要为 InfoWindow.open 提供第二个参数，它必须是 "anchor"（API 中唯一的原生锚点是标记，因此多边形不起作用）：

open open([map, anchor])
Parameters:
map (optional): Map|StreetViewPanorama
anchor (optional): MVCObject
Return Value: None

Opens this InfoWindow on the given map. Optionally, an InfoWindow can be associated with an anchor. In the core API, the only anchor is the Marker class. However, an anchor can be any MVCObject that exposes a LatLng position property and optionally a Point anchorPoint property for calculating the pixelOffset (see InfoWindowOptions). The anchorPoint is the offset from the anchor's position to the tip of the InfoWindow.

要使其在没有锚点的情况下工作（即使用多边形），请设置信息窗口的 position。

google.maps.event.addListener(lahanPath, 'click', (function(lahanPath, i) {
return function() {
   infowindow.setContent(locations[i][4]);
   infowindow.setPosition(latLng);
   infowindow.open(map);
   }
})(lahanPath, i));

proof of concept fiddle

代码片段：

var locations = [
   ['2',
    -7.928363082196162,
    110.29961786496813,
    '#FF0000',
    '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h4 id="firstHeading" class="firstHeading">2</h4>'+
    '<h6>Test</h6>'+
    '<div id="bodyContent"><p>'+
    '<ul>'+
    '<li> address1' +
    '<li> name1' +
    '<li> <a href="#" target="_blank">Detail</a>' +
    '</ul></div></div>',
      [
         {lat:-7.928484678360535, lng:110.29984203643903},
         {lat:-7.928317314428722, lng:110.29931728739098},
         {lat:-7.928261526436312, lng:110.2993400861676},
         {lat:-7.928326612426706, lng:110.29984970588043}
      ]
   ],
   ['4',
    -7.929468936295299,
    110.29790183540183,
    '#FFFF00',
    '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h4 id="firstHeading" class="firstHeading">4</h4>'+
    '<h6>Test 2</h6>'+
    '<div id="bodyContent"><p>'+
    '<ul>'+
    '<li> address2' +
    '<li> name2' +
    '<li> <a href="#" target="_blank">Detail</a>' +
    '</ul></div></div>',
      [
         {lat:-7.92956324428696, lng:110.29753265447664},
         {lat:-7.929071779867816, lng:110.29795204300183},
         {lat:-7.929048809572604, lng:110.29787905276964},
         {lat:-7.928977631597796, lng:110.29787925026733},
         {lat:-7.928972162828607, lng:110.29773508202754},
         {lat:-7.929113352484229, lng:110.2977215078638},
         {lat:-7.929107592513504, lng:110.29744912881154}]
      ],
];

var latLng = new google.maps.LatLng(locations[0][1], locations[0][2]);

var map = new google.maps.Map(document.getElementById('map'), {
zoom: 16, //level zoom
scaleControl: true,
center:latLng,
mapTypeId: google.maps.MapTypeId.HYBRID
});

var infowindow = new google.maps.InfoWindow();
var line_locations, lahanPath, i;
for (i = 0; i < 2; i++) {
   line_locations = locations[i][5];
   lahanPath = new google.maps.Polygon({
       path: line_locations,
       geodesic: true,
       map:map,
       strokeColor: locations[i][3],
       strokeOpacity: 0.5,
       strokeWeight: 0.5,
       fillColor: locations[i][3],
       fillOpacity: 0.35
   });
   

google.maps.event.addListener(lahanPath, 'click', (function(lahanPath, i) {
return function() {
   infowindow.setContent(locations[i][4]);
   infowindow.setPosition(latLng);
   infowindow.open(map);
   }
})(lahanPath, i));
}

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 src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk">
</script>

为多个多边形显示多个信息窗口的问题

Problem with showing multiple infowindows for multiple polygon

javascript

google-maps

google-maps-api-3