Question

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

我在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中唯一的本地锚是Marker，因此Polygon不起作用）：

打开打开（[地图，锚点]）
  参数：
  地图（可选）：地图| StreetViewPanorama
  锚点（可选）：MVCObject
  返回值：无

  在给定的地图上打开此InfoWindow。 （可选）InfoWindow可以与锚关联。在核心API中，唯一的锚点是Marker类。但是，锚点可以是任何MVCObject，它公开LatLng位置属性以及（可选）公开用于计算pixelOffset的Point anchorPoint属性（请参见InfoWindowOptions）。 anchorPoint是从锚点位置到InfoWindow尖端的偏移量。

要使其在没有锚点（即带有多边形）的情况下工作，请设置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>

显示多个多边形的多个信息窗口时出现问题

1 个答案: