javascript - Atribuie un infowindow fiecărui marker în Google Maps
Am o problemă în ceea ce privește atribuirea ferestrei de informații fiecărui marcator de pe harta mea.
Cod JS:
for (i=0;i<location.length;i++){
var id = location[i][0];
var name = location [i][1];
var pos = new google.maps.LatLng(location[i[3],location[i][4]);
var contentString = id;
var infowindow = new google.maps.InfoWindow({content:contentString});
var marker= new google.maps.Marker({position: pos, map: map, title: id});
marker.addListener('click', function() { infowindow.open(map, this);
});
Problema este că handler-ul meu de clic va afișa același „id” pentru fiecare marker (id-ul afișat este id-ul ULTIMEI mele înregistrări din baza de date). Există o modalitate de a afișa fiecare fereastră de informații pentru fiecare marker?
Răspuns #1
Presupunând că array-ul tău location este preluat și populat din baza de date...
În primul rând, ai o eroare:
var pos=new google.maps.LatLng(location[i[3],location[i][4]);
ar trebui să îți repari parantezele și să le pui în felul acesta:
var pos=new google.maps.LatLng(location[ i ][3],location[ i ][4]);
Iată un exemplu:
Am încercat să urmez exemplul tău cât de mult am putut, deoarece nu ai specificat un tablou și am creat unul care corespunde tabloului tău (poți adăuga încă o coloană dacă vrei pentru numele tale)
Bucle:
for (var i = 0; i < location.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(location[i][1], location[i][2]),
map: map,
title: location[i][0]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(location[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
Declareți infoWindow-ul înainte de buclă și extrageți-l în interiorul evenimentului dvs.
Fereastră de informații:
var infowindow = new google.maps.InfoWindow();
Eveniment de clic:
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(location[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
Exemplu complet fiddle: http://jsfiddle.net/eugensunic/7TZFP/5/
