Wie zeige ich ganz einfach mehrere Markierungen und Infofenster in Google Maps JS API v3 an?-js-Tutorial-php.cn

Wie zeige ich ganz einfach mehrere Markierungen und Infofenster in Google Maps JS API v3 an?

Mary-Kate Olsen

Freigeben： 2024-12-20 17:12:10

Original

802 Leute haben es durchsucht

How to Easily Display Multiple Markers and Info Windows in Google Maps JS API v3?

Anzeige mehrerer Markierungen in Google Maps JS API v3

Einführung

Die Anzeige mehrerer Markierungen in Google Maps ist nicht von Bedeutung Herausforderung; Allerdings können einige Tutorials für Anfänger zu komplex erscheinen. Dieser Artikel stellt einen vereinfachten Ansatz zum Plotten von Markierungen und zum Anzeigen eines Infofensters beim Klicken vor.

Ansatz

1. Markierungsdaten abrufen:

Beginnen Sie mit dem Abrufen der Markierungsdaten aus einem Array, wie im Google-Beispiel dargestellt:

var locations = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

Nach dem Login kopieren

2. Initialisieren Sie die Karte:

Instanziieren Sie eine neue Google Map innerhalb eines div-Elements und stellen Sie Optionen wie Zoom, Mitte und Kartentyp bereit.

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

Nach dem Login kopieren

3. Markierungen und Infofenster hinzufügen:

Durchlaufen Sie das Standort-Array und erstellen Sie eine Markierung für jeden Standort. Wenn auf die Markierung geklickt wird, wird ein Infofenster mit dem Namen des Standorts angezeigt.

var infowindow = new google.maps.InfoWindow();
var marker, i;

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
  });
 
  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

Beispielcode

Der folgende vollständige Codeausschnitt veranschaulicht die Implementierung:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <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

Zusätzlich Überlegungen

Das bereitgestellte Beispiel verwendet einen festen API-Schlüssel; Denken Sie daran, es durch Ihr eigenes zu ersetzen.
Schließmagie wird eingesetzt, um sicherzustellen, dass die korrekten Standortdaten an das Infofenster übergeben werden.
Weitere Informationen zu Schließungen finden Sie im Artikel des Mozilla Dev Center.

Das obige ist der detaillierte Inhalt vonWie zeige ich ganz einfach mehrere Markierungen und Infofenster in Google Maps JS API v3 an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!