Wie füge ich mithilfe der Google Maps JS API v3 ganz einfach mehrere Markierungen mit benutzerdefinierten InfoWindows zu einer Google Map hinzu?-js-Tutorial-php.cn

Wie füge ich mithilfe der Google Maps JS API v3 ganz einfach mehrere Markierungen mit benutzerdefinierten InfoWindows zu einer Google Map hinzu?

Susan Sarandon

Freigeben： 2024-12-18 17:00:11

Original

165 Leute haben es durchsucht

How to Easily Add Multiple Markers with Custom InfoWindows to a Google Map using the Google Maps JS API v3?

Google Maps JS API v3 – Ein einfaches Beispiel für mehrere Markierungen

Das Erstellen mehrerer Markierungen auf einer Google Map kann insbesondere eine entmutigende Aufgabe sein für Neueinsteiger in die API. Um diesen Prozess zu vereinfachen, werden wir uns mit einem einfachen Beispiel befassen, das Sie durch die notwendigen Schritte führt.

Betrachten Sie das folgende von Google bereitgestellte Datenarray:

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

Das Ziel ist die Darstellung Diese Markierungen auf einer Karte und zeigt ein Infofenster mit dem Namen an, wenn auf eine Markierung geklickt wird.

<!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

Dieser Code erstellt eine Karte mit Mittelpunkt um Sydney, Australien, mit einem Zoomstufe 10. Es werden dynamisch Markierungen für jeden Strand im Array generiert, und jede Markierung zeigt beim Klicken ein Infofenster mit dem Namen des Strandes an.

Beachten Sie, dass der Ereignis-Listener für das Klickereignis einen Abschluss verwendet, um den zu erhalten Werte des Markers und des Array-Index während der Ausführung der Rückruffunktion.

Durch Befolgen dieser Schritte können Sie ganz einfach mehrere Marker mit benutzerdefinierten InfoWindows zu Ihrem eigenen Google Maps hinzufügen Visualisierungen.

Das obige ist der detaillierte Inhalt vonWie füge ich mithilfe der Google Maps JS API v3 ganz einfach mehrere Markierungen mit benutzerdefinierten InfoWindows zu einer Google Map hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!