Wie kann ich mithilfe von JavaScript problemlos mehrere Markierungen mit InfoWindows auf einer Google-Karte implementieren?-js-Tutorial-php.cn

Wie kann ich mithilfe von JavaScript problemlos mehrere Markierungen mit InfoWindows auf einer Google-Karte implementieren?

DDD

Freigeben： 2024-12-31 04:22:09

Original

920 Leute haben es durchsucht

How to Easily Implement Multiple Markers with InfoWindows on a Google Map using JavaScript?

Einfache Google Maps-Implementierung mehrerer Markierungen in JavaScript

In diesem Tutorial werden wir einen vereinfachten Ansatz zum Erstellen mehrerer Markierungen auf einer Google Map untersuchen .

Übersicht

Für Einsteiger, die Google Maps erkunden API kann es komplex erscheinen, mehrere Markierungen auf einer Karte darzustellen. Dieses Tutorial bietet eine einfache und unkomplizierte Lösung.

Beispieldaten

Lassen Sie uns das Beispieldatenarray von Google verwenden:

var locations = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  // ... Additional beach locations
];

Nach dem Login kopieren

Erstellen des Karte

Zuerst initialisieren wir ein Google Karte:

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 10,
  center: { lat: -33.92, lng: 151.25 },
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

Nach dem Login kopieren

Markierungen erstellen

Um mehrere Markierungen zu erstellen, durchlaufen wir das Standortarray:

var marker, i;
for (i = 0; i < locations.length; i++) {
  marker = new google.maps.Marker({
    position: { lat: locations[i][1], lng: locations[i][2] },
    map: map
  });
}

Nach dem Login kopieren

Hinzufügen Popup-Infofenster

Wir erstellen für jede Markierung ein Infofenster, um den Strandnamen anzuzeigen, wann angeklickt:

var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', (function(marker, i) {
  return function() {
    infowindow.setContent(locations[i][0]);
    infowindow.open(map, marker);
  }
})(marker, i));

Nach dem Login kopieren

Vollständiges Ergebnis

Das vollständige Code-Snippet unten enthält alle Elemente, die für die Mehrfachmarkierungsfunktionalität erforderlich sind:

// HTML with map container
<!DOCTYPE html>
<html> 
<head> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?key=YOUR_API_KEY" 
          type="text/javascript"></script>
</head> 
<body>
  <div>

Nach dem Login kopieren

Wenn Sie diese Schritte befolgen, können Sie ganz einfach mehrere Markierungen mit Popup-InfoWindows auf einer Google Map einzeichnen.

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von JavaScript problemlos mehrere Markierungen mit InfoWindows auf einer Google-Karte implementieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!