0
Im爲創建的每個多邊形創建infowindow時遇到了一些麻煩。我嘗試了幾個網站的樣本,但都沒有成功。在下面,你看到代碼。點擊多邊形時沒有任何反應。在Google Maps Api中爲每個多邊形添加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>
我得到一個JavaScript錯誤:'未捕獲的ReferenceError:地圖上沒有線332限定';你的地圖變量對你的初始化函數是本地的。 – geocodezip