带有Infowindows的Google Maps API多个标记
我试图添加多个标记，每个都有自己的infowindow，点击时出现。 我在获取infowindows时遇到了麻烦，当我尝试它时，只显示一个标记而没有infowindow。
谢谢，让我知道如果你需要更多的信息
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% } </style> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB1tbIAqN0XqcgTR1-FxYoVTVq6Is6lD98&sensor=false"> </script> <script type="text/javascript"> var locations = [ ['loan 1', 33.890542, 151.274856, 'address 1'], ['loan 2', 33.923036, 151.259052, 'address 2'], ['loan 3', 34.028249, 151.157507, 'address 3'], ['loan 4', 33.80010128657071, 151.28747820854187, 'address 4'], ['loan 5', 33.950198, 151.259302, 'address 5'] ]; function initialize() { var myOptions = { center: new google.maps.LatLng(33.890542, 151.274856), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("default"), myOptions); setMarkers(map, locations) } function setMarkers(map, locations) { var marker, i for (i = 0; i < locations.length; i++) { var loan = locations[i][0] var lat = locations[i][1] var long = locations[i][2] var add = locations[i][3] latlngset = new google.maps.LatLng(lat, long); var marker = new google.maps.Marker({ map: map, title: loan, position: latlngset }); map.setCenter(marker.getPosition()) var content = "Loan Number: " + loan + '</h3>' + "Address: " + add var infowindow = new google.maps.InfoWindow() google.maps.AddListener(marker, 'click', function (map, marker) { infowindow.setContent(content) infowindow.open(map, marker) }); } } </script> </head> <body onload="initialize()"> <div id="default" style="width:100%; height:100%"></div> </body> </html> 你可以使用闭包。 只要修改你的代码就可以了：
google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ return function() { infowindow.setContent(content); infowindow.open(map,marker); }; })(marker,content,infowindow));
这是DEMO
这是可以肯定工作的代码片段。 您可以访问下面的链接工作jsFiddle和解释详细。 如何在完美缩放的谷歌地图上find多个地址
var infowindow = new google.maps.InfoWindow(); google.maps.event.addListener(marker, 'mouseover', (function(marker) { return function() { var content = address; infowindow.setContent(content); infowindow.open(map, marker); } })(marker));
如果您还想将infowindow的closures绑定到某个事件，请尝试如下所示
google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ return function() { infowindow.setContent(content); infowindow.open(map,marker); windows.push(infowindow) google.maps.event.addListener(map,'click', function(){ infowindow.close(); }); }; })(marker,content,infowindow));
function setMarkers(map,locations){ for (var i = 0; i < locations.length; i++) { var loan = locations[i][0]; var lat = locations[i][1]; var long = locations[i][2]; var add = locations[i][3]; latlngset = new google.maps.LatLng(lat, long); var marker = new google.maps.Marker({ map: map, title: loan , position: latlngset }); map.setCenter(marker.getPosition()); marker.content = "<h3>Loan Number: " + loan + '</h3>' + "Address: " + add; google.maps.events.addListener(marker,'click', function(map,marker){ map.infowindow.setContent(marker.content); map.infowindow.open(map,marker); }); } }
然后将var infowindow = new google.maps.InfoWindow()移到initialize()函数中：
function initialize() { var myOptions = { center: new google.maps.LatLng(33.890542, 151.274856), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("default"), myOptions); map.infowindow = new google.maps.InfoWindow(); setMarkers(map,locations) }
