2010-11-01 6 views
5

Ho una mappa con più polilinee e desidero aprire una finestra specifica della linea quando fai clic sulla linea.Più polilinee e infowindows con Google Maps V3

Finora il mio codice mostra solo il contenuto dell'ultima iterazione.

Ho trovato due esempi molto belli di ciò che voglio, ma dopo ore di tentativi non sono ancora arrivato.
Esempio 1: http://srsz750.appspot.com/api3/polylines-multiple.html
Esempio 2: http://www.geocodezip.com/v3_GenericMapBrowser.asp?filename=flights090414.xml

Così il vostro sono il mio ultimo colpo: -S

Ecco il mio codice che mostra solo il contenuto dell'ultima iterazione:

for (var i = 0; i < locations.length; i++) { 
var route = locations[i]; // locations is an array of route-arrays. 
//route is an array with details. route[0] contains the description. 

var imageStart = 'img/rijder.png'; 
var polyOptions = { 
    strokeColor: '#0000FF', 
     strokeOpacity: 1.0, 
    strokeWeight: 3 
    }  

    poly = new google.maps.Polyline(polyOptions, info); 
    var path = poly.getPath(); 

//line text 

var info = route[0]; 
google.maps.event.addListener(poly, 'click', function(event) { 
    infowindow.setContent(info); 
    infowindow.position = event.latLng; 
infowindow.open(map); 
    }); 

//startmarker 
var startLatLng = new google.maps.LatLng(route[1], route[2]); 
var smarker = new google.maps.Marker({ 
    position: startLatLng, 
    map: map, 
    icon: imageStart, 
    title: route[7], 
    html: route[0]  
}); 
path.push(startLatLng); 
//starttext 

google.maps.event.addListener(smarker, "click", function() { 
     infowindow.setContent(this.html); 
     infowindow.open(map, this); 
     }); 

//endmarker 
var endLatLng = new google.maps.LatLng(route[4], route[5]); 
var emarker = new google.maps.Marker({ 
    position: endLatLng, 
    map: map, 
    icon: imageEnd, 
    title: route[8], 
    html: route[3]  
}); 
path.push(endLatLng); 
//endtext 

google.maps.event.addListener(emarker, "click", function() { 
      infowindow.setContent(this.html); 
      infowindow.open(map, this); 
     }); 
//close line and put on the map 
poly.setMap(map); 
} 
} 

Ed ecco il codice che mi aspetterei di lavorare ma tutte le linee sono scomparse (solo il codice rilevante, ho anche aggiunto una funzione mouseover):

//line text 
    google.maps.event.addListener(poly, 'click', (function(event,index){ 
    return function(){ 
    var routeinfw = locations[index]; 
    var inf = routeinfw[0]; 
    infowindow.setContent(inf); 
    infowindow.position = mouselocation; 
    infowindow.open(map); 
     }; 
    })(event,i)); 

//starticon 

risposta

9

Proprio come nell'esempio che hai postato, creare una funzione per creare gli eventi click ascoltatori e chiamarlo da dentro la posizioni ciclo:

function createInfoWindow(poly,content) { 
    google.maps.event.addListener(poly, 'click', function(event) { 
     infowindow.content = content; 
     infowindow.position = event.latLng; 
     infowindow.open(map); 
    }); 
} 

E si può chiamare questo alla fine del ciclo:

createInfoWindow(poly,info); 
+1

il tuo codice risolve un problema di ANCORAGGIO con poligoni (non si ancorano bene con event.latLng - marcatori, ok). quindi, posizionare esplicitamente il infowindow, al contrario di 'infowindow.open (map, event.latLng)', è una buona soluzione per l'interfaccia evento poligono buggy di Google Maps. –

+1

contento che abbia aiutato! – ifaour

Problemi correlati