Mehrere Polylinien und Infofenster mit Google Maps V3
-
28-09-2019 - |
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
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);