在Google Maps Api中为每个多边形添加infowindow

时间：2021-09-23 20:36:45

Im having some trouble with creating an infowindow for each polygon I created. I tried some samples from several websites, but each with no success. Below, you see the code. Nothing happens when clicking on a polygon.

我在为我创建的每个多边形创建一个infowindow时遇到了一些麻烦。我尝试了几个网站的一些样本,但都没有成功。下面,您会看到代码。单击多边形时没有任何反应。

Thanks in advance!

提前致谢!

<!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 个解决方案

#1

1  

This is a classic scope problem. map is not visible for your showInfoxxxx functions. You have two choices :

这是一个经典的范围问题。 showInfoxxxx函数不显示map。你有两个选择:

1) move map outside the initialization function, into the global scope.

1)将映射移动到初始化函数之外,进入全局范围。

2) move your showInfoxxxx functions into the initialization function.

2)将showInfoxxxx函数移动到初始化函数中。

Here is a fiddle with beautified code using option #1 -> http://jsfiddle.net/9kTxS/

这是一个使用选项#1的美化代码的小提琴 - > http://jsfiddle.net/9kTxS/

#1

1  

This is a classic scope problem. map is not visible for your showInfoxxxx functions. You have two choices :

这是一个经典的范围问题。 showInfoxxxx函数不显示map。你有两个选择:

1) move map outside the initialization function, into the global scope.

1)将映射移动到初始化函数之外,进入全局范围。

2) move your showInfoxxxx functions into the initialization function.

2)将showInfoxxxx函数移动到初始化函数中。

Here is a fiddle with beautified code using option #1 -> http://jsfiddle.net/9kTxS/

这是一个使用选项#1的美化代码的小提琴 - > http://jsfiddle.net/9kTxS/

标签：

相关文章