可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
Having similar problem as others have had on this website where it shows only the last marker's info window info in all markers. Can't seem to solve this with any of the solutions given. Also, the last one of my markers doesn't show an info window at all.
<script src="http://www.google.com/jsapi"></script> <script type="text/javascript" src="data2.json"></script> <script type="text/javascript" src="js/markerclusterer.js"></script> <script type="text/javascript"> google.load('maps', '3', { other_params: 'sensor=false' }); google.setOnLoadCallback(initialize); function initialize() { var center = new google.maps.LatLng(55.4419, -4.1419); var map = new google.maps.Map(document.getElementById('map'), { zoom: 5, center: center, mapTypeId: google.maps.MapTypeId.ROADMAP }); var markers = []; for (var i = 0, dataPhoto; dataPhoto = data.markers[i]; i++) { var latLng = new google.maps.LatLng(dataPhoto.latitude,dataPhoto.longitude); var theTitle = dataPhoto.address; var contentString = '<div align="left"><img src="logo.gif" alt="" width="242" height="71" /><br /><br /><p style="color:#000000;">' + data.markers[i].address + '<br />' + dataPhoto.telephone + '</p></div>'; var infowindow = new google.maps.InfoWindow({ content: contentString, }); var thisIcon = 'markers/image.png'; for (var i = 0, marker; marker = markers[i]; i++) {google.maps.event.addListener(marker, 'click', function() {infowindow.open(map,this);}); } var marker = new google.maps.Marker({ position: latLng, clickable: true, title: theTitle, icon: thisIcon, }); markers.push(marker); } var markerCluster = new MarkerClusterer(map, markers); } </script>
Any help much appreciated!
回答1:
I have not tested this but it should work - also please have a look at : http://code.google.com/apis/maps/documentation/javascript/events.html#EventClosures
<script src="http://www.google.com/jsapi"> </script> <script type="text/javascript" src="data2.json"> </script> <script type="text/javascript" src="js/markerclusterer.js"> </script> <script type="text/javascript"> google.load('maps', '3', { other_params: 'sensor=false' }); google.setOnLoadCallback(initialize); function initialize(){ var center = new google.maps.LatLng(55.4419, -4.1419); var map = new google.maps.Map(document.getElementById('map'), { zoom: 5, center: center, mapTypeId: google.maps.MapTypeId.ROADMAP }); var markers = []; for (var i = 0, dataPhoto; dataPhoto = data.markers[i]; i++) { var latLng = new google.maps.LatLng(dataPhoto.latitude, dataPhoto.longitude); var theTitle = dataPhoto.address; var contentString = '<div align="left"><img src="logo.gif" alt="" width="242" height="71" /><br /><br /><p style="color:#000000;">' + data.markers[i].address + '<br />' + dataPhoto.telephone + '</p></div>'; var thisIcon = 'markers/image.png'; var marker = new google.maps.Marker({ position: latLng, clickable: true, title: theTitle, icon: thisIcon, }); attachIWindow(contentString, marker); markers.push(marker); } var markerCluster = new MarkerClusterer(map, markers); } function attachIWindow(content, marker){ var infowindow = new google.maps.InfoWindow({ content: content, }); google.maps.event.addListener(marker, 'click', function(){ infowindow.open(map, marker); }); } </script>
回答2:
We can make use of closures to solve this problem
Use the below code snippet to add info window to marker
function AddInfoWidnow(marker,message) { var infowindow = new google.maps.InfoWindow({ content: message }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(marker.get('map'), marker); }); }
To see a working sample refer here
回答3:
If I get this right then please take a look at closures and try to understand them properly.Then javascript magic will happen!
翻译