mehrere Marker mit URL

Question

Ich verwende Google Maps API mit mehreren Markierungen & Maus über & Infowindows. Es funktioniert perfekt. Jetzt möchte ich eine individuelle URL für jeden Marker bei CLICK hinzufügen. Aus irgendeinem Grund öffnen alle Markierungen immer die letzte URL. - Was ist möglicherweise das Problem?

\t  // Define your locations: HTML content for mouseover, the info window content, latitude, longitude, url 
 
\t  var locations = [ 
 
\t  ['<h8>Brugg</h8>', '<h7>auseinander.</h7>', 47.4867355, 8.2109103, 'http://www.stadtereignisse.ch/dokumentiert/'], 
 

 
\t  ['<h8>Aarau»</h8>', '<h7>Aarau</h7>', 47.391224, 8.038669, 'http://www.stadtereignisse.ch/erlebt/'], 
 

 
\t  ['<h8>Bern</h8>', '<h7>Bern</h7>', 46.947974, 7.447447, 'http://www.stadtereignisse.ch/erwuenscht/'] 
 
\t  ];

\t  // Add the markers and infowindows to the map 
 
\t  for (var i = 0; i < locations.length; i++) { 
 
\t  var marker = new google.maps.Marker({ 
 
\t   position: new google.maps.LatLng(locations[i][2], locations[i][3]), 
 
\t  /* title: locations[i][0], */ 
 
\t \t url: "http://www.stadtereignisse.ch/dokumentiert/", 
 
\t   map: map, 
 
\t   visible: true, 
 
\t   icon: icons[iconCounter] 
 
\t  }); 
 
\t 
 
\t  markers.push(marker); 
 
\t 
 

 
\t  
 
\t 
 
\t // CLICK (Allow each marker to have an info window) 
 
google.maps.event.addListener(marker, 'click', function() { 
 
    window.location.href = marker.url; 
 
}); 
 

 

 

 
    // MOUSEOVER  
 
    google.maps.event.addListener(marker, 'mouseover', (function(marker, i) { 
 
    return function() { 
 
     infowindow.setContent(locations[i][0]); 
 
     infowindow.open(map, marker); 
 
    } 
 
    })(marker, i)); \t   
 
\t  
 
     \t 
 
\t  
 
\t  iconCounter++; 
 
\t  // We only have a limited number of possible icon colors, so we may have to restart the counter 
 
\t  if(iconCounter >= iconsLength) { 
 
\t  \t iconCounter = 0; 
 
\t  } 
 
\t  }

Answer 1

Blick auf die Differenz zwischen Ihrem click Handler und Ihren mouseover Handler. Einer von diesen schafft eine Schließung; der andere nicht. Sie müssen auch einen Abschluss für click erstellen.

Statt der komplizierten Technik einer Funktion, die eine Funktion zurückgibt, gibt es jedoch einen saubereren Weg. Verschieben Sie den gesamten Schleifenkörper einfach in eine Funktion, die Sie aus der Schleife aufrufen. Dann brauchen Sie nicht die zusätzliche Komplikation beim Mouseover (oder klicken Sie auf beides).

Auch, wie @ValLeNain darauf hingewiesen, Sie setzen marker.url auf einen hart codierten Wert anstelle eines anderen Werts für jeden Marker, also habe ich das geändert, was wie der gewünschte Wert aussieht.

Zum Schluss ein paar Tipps zur Benutzerfreundlichkeit: I nicht empfehlen Öffnen eines Infofenster auf einem Mouseover. Wie Sie wahrscheinlich bemerkt haben, verschiebt sich die gesamte Karte, wenn Sie ein Infowindow für einen Marker nahe dem oberen Rand der sichtbaren Karte öffnen, um das Infowindow in Sicht zu bringen. Es ist verwirrend und überraschend, wenn ein Mouseover diese Bewegung auslöst. Infofenster sollten mit einem Klick geöffnet werden, nicht mit einem Mouseover. Wenn Sie dann einen Link in den Infowindow-Text einfügen möchten, können Sie das tun.

Ich habe dieses Problem im folgenden Code nicht angesprochen, aber überlasse es Ihnen zu sortieren.

// Add the markers and infowindows to the map 
    for (var i = 0; i < locations.length; i++) { 
     addMarker(locations[i]); 
    } 

    function addMarker(location) { 
     var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(location[2], location[3]), 
     title: location[0], 
     url: location[4], 
     map: map, 
     visible: true, 
     icon: icons[iconCounter] 
     }); 

     markers.push(marker); 

     // CLICK (Allow each marker to have an info window) 
     google.maps.event.addListener(marker, 'click', function() { 
      window.location.href = marker.url; 
     }); 

     // MOUSEOVER  
     google.maps.event.addListener(marker, 'mouseover', function() { 
     infowindow.setContent(location[0]); 
     infowindow.open(map, marker); 
     }); 

     iconCounter++; 
     // We only have a limited number of possible icon colors, so we may have to restart the counter 
     if(iconCounter >= iconsLength) { 
     iconCounter = 0; 
     } 
    }