我为我创建的每个多边形创建一个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>
答案 0 :(得分：1)
这是一个经典的范围问题。 map功能无法显示showInfoxxxx。你有两个选择：
1）将map功能移出initialization到全局范围内。
2）将showInfoxxxx函数移到initialization函数中。
这是使用选项＃1的美化代码的小提琴 - ＆gt;的 http://jsfiddle.net/9kTxS/