在Google Maps Api中为每个多边形添加infowindow
在Google Maps Api中为每个多边形添加infowindow
提问于 2014-03-19 22:05:34
我在为我创建的每个多边形创建infowindow时遇到了一些麻烦。我尝试了几个网站的一些样本，但每个都没有成功。下面，您可以看到代码。单击多边形时没有任何反应。
提前感谢！
<!DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(52.368465, 4.903921),
zoom:11,
mapTypeId:google.maps.MapTypeId.TERRAIN
};
var map=new google.maps.Map(document.getElementById("googleMap")
,mapProp);
var Centrum;
var triangleCoords = [
new google.maps.LatLng(52.388828,4.895675),
new google.maps.LatLng(52.388153,4.885783),
new google.maps.LatLng(52.388350,4.884646),
new google.maps.LatLng(52.384329,4.881781),
new google.maps.LatLng(52.382253,4.880483),
new google.maps.LatLng(52.381906,4.879625),
new google.maps.LatLng(52.381304,4.879915),
new google.maps.LatLng(52.374663,4.875784),
new google.maps.LatLng(52.374342,4.875602),
new google.maps.LatLng(52.373425,4.875387),
new google.maps.LatLng(52.372560,4.874572),
new google.maps.LatLng(52.371846,4.874486),
new google.maps.LatLng(52.369783,4.875473),
new google.maps.LatLng(52.368518,4.876739),
new google.maps.LatLng(52.366789,4.877533),
new google.maps.LatLng(52.365911,4.878606),
new google.maps.LatLng(52.364968,4.879249),
new google.maps.LatLng(52.364339,4.879357),
new google.maps.LatLng(52.363421,4.880934),
new google.maps.LatLng(52.363081,4.881395),
new google.maps.LatLng(52.362059,4.881974),
new google.maps.LatLng(52.361803,4.884131),
new google.maps.LatLng(52.360198,4.887403),
new google.maps.LatLng(52.358986,4.889088),
new google.maps.LatLng(52.358331,4.890858),
new google.maps.LatLng(52.357977,4.898744),
new google.maps.LatLng(52.359215,4.904666),
new google.maps.LatLng(52.359726,4.906683),
new google.maps.LatLng(52.360578,4.908271),
new google.maps.LatLng(52.360532,4.910191),
new google.maps.LatLng(52.361266,4.911768),
new google.maps.LatLng(52.362236,4.918356),
new google.maps.LatLng(52.363245,4.919858),
new google.maps.LatLng(52.363756,4.922304),
new google.maps.LatLng(52.366461,4.927154),
new google.maps.LatLng(52.366592,4.931788),
new google.maps.LatLng(52.368741,4.932829),
new google.maps.LatLng(52.369979,4.933022),
new google.maps.LatLng(52.371794,4.932443),
new google.maps.LatLng(52.373215,4.930469),
new google.maps.LatLng(52.375167,4.923549),
new google.maps.LatLng(52.376824,4.913045),
new google.maps.LatLng(52.376785,4.911779),
new google.maps.LatLng(52.379968,4.910975),
new google.maps.LatLng(52.379863,4.905825),
new google.maps.LatLng(52.380963,4.901748),
new google.maps.LatLng(52.383478,4.897081)
];
Centrum = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.35
});
Centrum.setMap(map);
var Noord;
var triangleCoords = [
new google.maps.LatLng(52.379883,4.905782),
new google.maps.LatLng(52.379987,4.910953),
new google.maps.LatLng(52.382017,4.931467),
new google.maps.LatLng(52.382162,4.952323),
new google.maps.LatLng(52.382384,4.957409),
new google.maps.LatLng(52.382175,4.959512),
new google.maps.LatLng(52.381114,4.961808),
new google.maps.LatLng(52.371748,4.978223),
new google.maps.LatLng(52.370215,4.982150),
new google.maps.LatLng(52.368839,4.987600),
new google.maps.LatLng(52.368302,4.993243),
new google.maps.LatLng(52.368459,5.000110),
new google.maps.LatLng(52.369049,5.004766),
new google.maps.LatLng(52.370267,5.016482),
new google.maps.LatLng(52.375416,5.037661),
new google.maps.LatLng(52.388671,5.079138),
new google.maps.LatLng(52.413846,5.074246),
new google.maps.LatLng(52.416582,5.068281),
new google.maps.LatLng(52.416595,5.067916),
new google.maps.LatLng(52.417262,5.065384),
new google.maps.LatLng(52.416281,5.063217),
new google.maps.LatLng(52.416241,5.062659),
new google.maps.LatLng(52.416307,5.060942),
new google.maps.LatLng(52.416556,5.057788),
new google.maps.LatLng(52.415273,5.050921),
new google.maps.LatLng(52.415155,5.049119),
new google.maps.LatLng(52.416994,5.042574),
new google.maps.LatLng(52.417256,5.040665),
new google.maps.LatLng(52.417380,5.039399),
new google.maps.LatLng(52.418100,5.036856),
new google.maps.LatLng(52.418218,5.036255),
new google.maps.LatLng(52.418270,5.035847),
new google.maps.LatLng(52.418276,5.035461),
new google.maps.LatLng(52.418224,5.035096),
new google.maps.LatLng(52.418074,5.034753),
new google.maps.LatLng(52.417805,5.034399),
new google.maps.LatLng(52.417164,5.034056),
new google.maps.LatLng(52.416686,5.033487),
new google.maps.LatLng(52.416281,5.032479),
new google.maps.LatLng(52.415659,5.030022),
new google.maps.LatLng(52.416169,5.030097),
new google.maps.LatLng(52.416647,5.030086),
new google.maps.LatLng(52.417171,5.029957),
new google.maps.LatLng(52.417733,5.029711),
new google.maps.LatLng(52.418224,5.029399),
new google.maps.LatLng(52.418859,5.028960),
new google.maps.LatLng(52.419166,5.028691),
new google.maps.LatLng(52.419422,5.028337),
new google.maps.LatLng(52.419860,5.027254),
new google.maps.LatLng(52.420076,5.026481),
new google.maps.LatLng(52.420167,5.025612),
new google.maps.LatLng(52.420076,5.024925),
new google.maps.LatLng(52.420141,5.024282),
new google.maps.LatLng(52.420272,5.023488),
new google.maps.LatLng(52.420357,5.023198),
new google.maps.LatLng(52.420763,5.022351),
new google.maps.LatLng(52.421221,5.021610),
new google.maps.LatLng(52.421090,5.021149),
new google.maps.LatLng(52.419932,5.020376),
new google.maps.LatLng(52.419709,5.019765),
new google.maps.LatLng(52.419212,5.018595),
new google.maps.LatLng(52.419140,5.018520),
new google.maps.LatLng(52.419147,5.018445),
new google.maps.LatLng(52.419055,5.018198),
new google.maps.LatLng(52.419199,5.017812),
new google.maps.LatLng(52.420154,5.015001),
new google.maps.LatLng(52.425290,5.000700),
new google.maps.LatLng(52.425447,5.000153),
new google.maps.LatLng(52.425408,4.991366),
new google.maps.LatLng(52.425421,4.990497),
new google.maps.LatLng(52.425480,4.990491),
new google.maps.LatLng(52.425497,4.990427),
new google.maps.LatLng(52.425287,4.990346),
new google.maps.LatLng(52.424525,4.990400),
new google.maps.LatLng(52.423324,4.989107),
new google.maps.LatLng(52.423262,4.988871),
new google.maps.LatLng(52.423275,4.987782),
new google.maps.LatLng(52.422844,4.987096),
new google.maps.LatLng(52.426762,4.982638),
new google.maps.LatLng(52.422824,4.973373),
new google.maps.LatLng(52.421973,4.955971),
new google.maps.LatLng(52.422458,4.955821),
new google.maps.LatLng(52.422209,4.953525),
new google.maps.LatLng(52.423570,4.952388),
new google.maps.LatLng(52.423256,4.951315),
new google.maps.LatLng(52.422798,4.951572),
new google.maps.LatLng(52.421947,4.951508),
new google.maps.LatLng(52.421882,4.949813),
new google.maps.LatLng(52.421947,4.949684),
new google.maps.LatLng(52.421463,4.948525),
new google.maps.LatLng(52.421594,4.947753),
new google.maps.LatLng(52.415652,4.945114),
new google.maps.LatLng(52.414357,4.944105),
new google.maps.LatLng(52.413231,4.939578),
new google.maps.LatLng(52.412053,4.935286),
new google.maps.LatLng(52.411647,4.930716),
new google.maps.LatLng(52.412079,4.930372),
new google.maps.LatLng(52.418584,4.915738),
new google.maps.LatLng(52.418702,4.914687),
new google.maps.LatLng(52.418505,4.914601),
new google.maps.LatLng(52.418519,4.913957),
new google.maps.LatLng(52.420678,4.908786),
new google.maps.LatLng(52.420848,4.907992),
new google.maps.LatLng(52.421123,4.908035),
new google.maps.LatLng(52.421241,4.907563),
new google.maps.LatLng(52.422641,4.904516),
new google.maps.LatLng(52.423648,4.901791),
new google.maps.LatLng(52.424289,4.899645),
new google.maps.LatLng(52.424983,4.896190),
new google.maps.LatLng(52.425467,4.892263),
new google.maps.LatLng(52.425598,4.887757),
new google.maps.LatLng(52.425519,4.882908),
new google.maps.LatLng(52.425938,4.882371),
new google.maps.LatLng(52.426017,4.881814),
new google.maps.LatLng(52.425781,4.880140),
new google.maps.LatLng(52.425794,4.878144),
new google.maps.LatLng(52.426331,4.876320),
new google.maps.LatLng(52.427992,4.874132),
new google.maps.LatLng(52.429510,4.873306),
new google.maps.LatLng(52.429556,4.872737),
new google.maps.LatLng(52.430001,4.871879),
new google.maps.LatLng(52.430197,4.870956),
new google.maps.LatLng(52.430393,4.870731),
new google.maps.LatLng(52.429772,4.869668),
new google.maps.LatLng(52.430275,4.868885),
new google.maps.LatLng(52.430537,4.867973),
new google.maps.LatLng(52.430681,4.866740),
new google.maps.LatLng(52.430668,4.865913),
new google.maps.LatLng(52.430511,4.864916),
new google.maps.LatLng(52.430374,4.864197),
new google.maps.LatLng(52.430289,4.864197),
new google.maps.LatLng(52.429935,4.862673),
new google.maps.LatLng(52.429628,4.862802),
new google.maps.LatLng(52.428777,4.862469),
new google.maps.LatLng(52.425107,4.858210),
new google.maps.LatLng(52.424682,4.857942),
new google.maps.LatLng(52.424185,4.857802),
new google.maps.LatLng(52.423688,4.857899),
new google.maps.LatLng(52.421345,4.859680),
new google.maps.LatLng(52.420940,4.859852),
new google.maps.LatLng(52.420396,4.859809),
new google.maps.LatLng(52.419821,4.859519),
new google.maps.LatLng(52.416981,4.856408),
new google.maps.LatLng(52.414959,4.864905),
new google.maps.LatLng(52.399427,4.886148),
new google.maps.LatLng(52.398819,4.885086),
new google.maps.LatLng(52.393365,4.892768),
new google.maps.LatLng(52.388828,4.895697),
new google.maps.LatLng(52.383458,4.897070),
new google.maps.LatLng(52.380970,4.901748)
];
Noord = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.35
});
Noord.setMap(map);
var Westpoort;
var triangleCoords = [
new google.maps.LatLng(52.398825,4.885086),
new google.maps.LatLng(52.399427,4.886169),
new google.maps.LatLng(52.414965,4.864926),
new google.maps.LatLng(52.416974,4.856418),
new google.maps.LatLng(52.416673,4.856086),
new google.maps.LatLng(52.417445,4.851397),
new google.maps.LatLng(52.420167,4.831946),
new google.maps.LatLng(52.420697,4.828545),
new google.maps.LatLng(52.428503,4.767519),
new google.maps.LatLng(52.427482,4.767176),
new google.maps.LatLng(52.431060,4.739206),
new google.maps.LatLng(52.400723,4.728756),
new google.maps.LatLng(52.396868,4.757595),
new google.maps.LatLng(52.387832,4.758314),
new google.maps.LatLng(52.388003,4.768882),
new google.maps.LatLng(52.389194,4.769547),
new google.maps.LatLng(52.389181,4.818814),
new google.maps.LatLng(52.387597,4.818857),
new google.maps.LatLng(52.387387,4.831603),
new google.maps.LatLng(52.384820,4.831613),
new google.maps.LatLng(52.385082,4.845110),
new google.maps.LatLng(52.388788,4.844906),
new google.maps.LatLng(52.388815,4.859283),
new google.maps.LatLng(52.390491,4.859283),
new google.maps.LatLng(52.391250,4.858918),
new google.maps.LatLng(52.392102,4.857395),
new google.maps.LatLng(52.393856,4.857309),
new google.maps.LatLng(52.393869,4.856987),
new google.maps.LatLng(52.395375,4.856923),
new google.maps.LatLng(52.395310,4.858553),
new google.maps.LatLng(52.394943,4.860313),
new google.maps.LatLng(52.393895,4.862652),
new google.maps.LatLng(52.392717,4.864304),
new google.maps.LatLng(52.393136,4.866729),
new google.maps.LatLng(52.395401,4.871514),
new google.maps.LatLng(52.395283,4.871922),
new google.maps.LatLng(52.394760,4.871943),
new google.maps.LatLng(52.394838,4.872780),
new google.maps.LatLng(52.394537,4.876170)
];
Westpoort = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.35
});
Westpoort.setMap(map);
infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(Centrum, 'click', showInfoCentrum);
google.maps.event.addListener(Noord, 'click', showInfoNoord);
google.maps.event.addListener(Westpoort, 'click', showInfoWestpoort);
}
function showInfoCentrum(event) {
var contentString = "<b>Centrum</b><br />";
contentString += "Centrum, Amsterdam";
infowindow.setContent(contentString);
infowindow.setPosition(event.latLng);
infowindow.open(map);
}
function showInfoNoord(event) {
var contentString = "<b>Noord</b><br />";
contentString += "Noord, Amsterdam";
infowindow.setContent(contentString);
infowindow.setPosition(event.latLng);
infowindow.open(map);
}
function showInfoWestpoort(event) {
var contentString = "<b>Westpoort</b><br />";
contentString += "Westpoort, Amsterdam";
infowindow.setContent(contentString);
infowindow.setPosition(event.latLng);
infowindow.open(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:800px;height:600px;"></div>
</body>
</html>回答 1
Stack Overflow用户
发布于 2014-03-19 22:14:39
这是一个典型的作用域问题。对于您的showInfoxxxx函数，map不可见。您有两个选择：
1)将map移出initialization函数，进入全局作用域。
2)将您的showInfoxxxx函数移到initialization函数中。
下面是使用选项#1 -> 修改过的代码
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22508397
复制相关文章
相似问题
腾讯云开发者
