2014-03-19 78 views
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> 
+0

我得到一個JavaScript錯誤:'未捕獲的ReferenceError:地圖上沒有線332限定';你的地圖變量對你的初始化函數是本地的。 – geocodezip

回答

1

這是一個典型的示波器問題。 map對您的showInfoxxxx功能不可見。你有兩種選擇:

1)將map移到initialization函數之外,進入全局範圍。

2)將showInfoxxxx函數移動到initialization函數中。

下面是使用選項#1美化碼的小提琴 - >http://jsfiddle.net/9kTxS/

+0

非常感謝!愚蠢地忽​​略了這一點 – user3415749

相關問題