Проблема с отображением нескольких информационных окон для нескольких полигонов

Question

У меня проблема с отображением нескольких информационных окон для нескольких полигонов в API Google Map. генерируется несколько полигонов, но когда я щелкаю один из полигонов, информационное окно не отображается.

Я пробовал некоторые решения в stackoverflow, и информационное окно все еще не отображается.

и вот мой код, надеюсь, кто-то может помочь.

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 , это должен быть «якорь» (единственный родной якорь в API - это маркер, поэтому полигон не работает ):

открыто открыто ([карта, якорь])
Параметры:
карта (необязательно): Карта | StreetViewPanorama
якорь (необязательно): MVCObject
Возвращаемое значение: Нет

Открывает это информационное окно на заданной карте. Опционально, информационное окно может быть связано с привязкой. В базовом API единственным якорем является класс Marker. Однако якорем может быть любой MVCObject, который предоставляет свойство позиции LatLng и, необязательно, свойство Point anchorPoint для вычисления pixelOffset (см. InfoWindowOptions). AnchorPoint - это смещение от позиции якоря до кончика информационного окна.

Чтобы он работал без привязки (то есть с многоугольником), установите в 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));

подтверждение концепции скрипки

фрагмент кода:

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>