Frage

Ich habe eine Karte mit mehreren Polylinien und möchte eine Linie spezifische-Infofenster öffnen, wenn die Zeile klicken.

Bisher mein Code zeigt nur den Inhalt der letzten Iteration.

fand ich zwei sehr schöne Beispiele dafür, was ich will, aber nach Stunden versucht, ich bin immer noch nicht weiter.
Beispiel 1: http://srsz750.appspot.com/api3/polylines-multiple.html
Beispiel 2: http://www.geocodezip.com/v3_GenericMapBrowser.asp?filename= flights090414.xml

Also Ihr seid meine letzte Schuss: -S

Hier ist mein Code, zeigt nur der Inhalt der letzten Iteration:

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); 
 } 
}

Und hier ist der Code, den ich an der Arbeit erwarten würde, aber alle Linien verschwunden (nur der entsprechende Code, habe ich auch eine Mouseover-Funktion hinzugefügt):

  //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
War es hilfreich?

Lösung

Genau wie in dem Beispiel, das Sie geschrieben, eine Funktion erstellen, die Click-Ereignisse Zuhörer zu erstellen und aus dem Inneren der Stellen Schleife aufrufen:

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

Und Sie können dies am Ende der Schleife nennen:

createInfoWindow(poly,info);
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top