suchen

Heim >Web-Frontend >js-Tutorial >Wie kann ich mithilfe von JavaScript problemlos mehrere Markierungen mit InfoWindows auf einer Google-Karte implementieren?

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

DDD
DDDOriginal
2024-12-31 04:22:09910Durchsuche

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
];

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

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

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

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>

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!

JavaScript Array for using map this display
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie unterscheiden sich „let“ und „const“ von „var“ beim JavaScript-Hoisting?Nächster Artikel：Wie unterscheiden sich „let“ und „const“ von „var“ beim JavaScript-Hoisting?

In Verbindung stehende Artikel

Mehr sehen