显示多个多边形的多个信息窗口时出现问题 [英] Problem with showing multiple infowindows for multiple polygon
问题描述
我在Google Map API中显示多个多边形的多个信息窗口时遇到问题.生成了多个多边形，但是当我单击其中一个多边形时，infowindow没有显示.
I'm getting a problem with showing multiple infowindow for multiple polygons in google map api. multiple polygons are generated, but when I click one of the polygon, infowindow did not showing.
我已经尝试了stackoverflow中的一些解决方案，但信息窗口仍未显示.
i've tried some of the solution in stackoverflow and the infowindow still not showing.
这是我的代码，希望有人可以提供帮助.
and here is my code, hope someone can help.
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));
推荐答案
if you are going to provide a second argument to InfoWindow.open, it needs to be a "anchor" (the only native anchor in the API is a Marker, so a Polygon doesn't work):
打开打开([地图，锚点])
参数:
地图(可选):地图| StreetViewPanorama
锚点(可选):MVCObject
返回值:无
在给定的地图上打开此InfoWindow. (可选)InfoWindow可以与锚关联.在核心API中，唯一的锚点是Marker类.但是，锚点可以是任何公开LatLng位置属性的MVCObject，还可以是用于计算pixelOffset的Point anchorPoint属性(请参见InfoWindowOptions). anchorPoint是从锚点位置到InfoWindow尖端的偏移量.
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.
要使其在没有锚点(即带有多边形)的情况下工作，请设置InfoWindow的position.
For it to work without an anchor (i.e. with a Polygon), set the InfoWindow's 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>
这篇关于显示多个多边形的多个信息窗口时出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
