Google Maps and Their Markers

问题:

I have a JSON array of Marker positions being pulled into a Google map - This works fine.

I also have infoWindows linked to each of those markers - These also work fine.

However, when I click a marker (in any browser), the infoWindow only appears over the last added marker.

Here is a fiddle: http://jsfiddle.net/neuroflux/8WDwn/10/ and here is my loop:

for (var a = 0; a < dealer_markers.length; a++) {     var tmpLat = dealer_markers[a].lat;     var tmpLng = dealer_markers[a].lng;     var tmpName = dealer_markers[a].name;     var tmpAdr = dealer_markers[a].adr;     var tmpTel = dealer_markers[a].pc;     var tmpPc = dealer_markers[a].tel;      contentString[a] = '<div id="bg"><h2 class="title">'+tmpName+'</h2><h3 class="address">'+tmpAdr+'</h3><h3 class="pc">'+tmpPc+'</h3><h3 class="telephone">'+tmpTel+'</h3></div>';     var content = contentString[a];      dealer[a] = new google.maps.LatLng(tmpLat,tmpLng);      deal = dealer[a];      marker[a] = new google.maps.Marker({          map:map,         position: deal,         icon:'dealer.png',         title: "|"+new google.maps.LatLng(dealer[a].Ja,dealer[a].Ka)     });      lat = marker[a].position.Ja;     lng = marker[a].position.Ka;      compositeLatLng = new google.maps.LatLng(lat,lng);     mark = marker[a];       google.maps.event.addListener(mark, 'click', function(a) {         if (mark.infowindow) {             mark.infowindow.close();         }          mark.infowindow = new google.maps.InfoWindow({              content: contentString[marker.indexOf(this)]         });          mark.infowindow.open(map,mark);     }); } 

回答1:

As I stated in my comment, you can use a closure to work around the problem. Here is the demo. I created a wrapper function that:

1. creates a marker
2. optionally attaches an onclick handler

Inside that handler:

1. it attaches a blank infoWindow to the map (if necessary)
2. it hides that window, changes its content and shows it again over the marker (logic borrowed from here)

---

function _newGoogleMapsMarker(param) {     var r = new google.maps.Marker({         map: param._map,         position: new google.maps.LatLng(param._lat, param._lng),         title: param._head     });     if (param._data) {         google.maps.event.addListener(r, 'click', function() {             // this -> the marker on which the onclick event is being attached             if (!this.getMap()._infoWindow) {                 this.getMap()._infoWindow = new google.maps.InfoWindow();             }             this.getMap()._infoWindow.close();             this.getMap()._infoWindow.setContent(param._data);             this.getMap()._infoWindow.open(this.getMap(), this);         });     }     return r; }   for (var a = 0; a < dealer_markers.length; a++) {     .     .     .     var marker = _newGoogleMapsMarker({         _map: map,         _lat: tmpLat,         _lng: tmpLng,         _head: '|' + new google.maps.LatLng(tmpLat, tmpLng),         _data: '...'     }); } 

回答2:

The problem is that you are creating a function in a loop and then using mark inside that function so it will always appear next to the last marker created as mark is reassigned on each loop iteration

It is also good practice not to create functions in loops, so I would rewrite like this:

var map = null // your map created here  var infowindow = null;  var itemClick = function(a) {     if (this.infowindow) {         this.infowindow.close();     }      this.infowindow = new google.maps.InfoWindow({         content: contentString[marker.indexOf(this)]     });      this.infowindow.open(this.map, a);  }  for (var a = 0; a < dealer_markers.length; a++) {      ///  Other code.....      google.maps.event.addListener(mark, 'click', itemClick); } 

文章来源: Google Maps and Their Markers