Wie kann ich mithilfe der JavaScript-API v3 ganz einfach mehrere Markierungen mit Infofenstern auf einer Google-Karte darstellen?-js-Tutorial-php.cn

Wie kann ich mithilfe der JavaScript-API v3 ganz einfach mehrere Markierungen mit Infofenstern auf einer Google-Karte darstellen?

Mary-Kate Olsen

Freigeben： 2024-12-23 15:48:12

Original

748 Leute haben es durchsucht

How Can I Easily Plot Multiple Markers with Info Windows on a Google Map Using the JavaScript API v3?

Vereinfachen Sie das Plotten mehrerer Markierungen in der Google Maps JS API v3

Bei der Arbeit mit der Google Maps JavaScript API kann das Plotten mehrerer Markierungen oft komplexe Implementierungen erfordern . Dieser Artikel bietet eine unkomplizierte Lösung für Anfänger, die eine Reihe von Markierungen mit zugehörigen Infofenstern anzeigen möchten.

Problem:
Betrachten wir eine Reihe von Orten mit den entsprechenden Namen und Koordinaten und Referenzwerte. Ziel ist es, Markierungen für jeden Ort auf einer Karte zu platzieren und beim Klicken auf die Markierung ein Infofenster mit dem Namen anzuzeigen.

Lösung:

HTML und CSS:

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

JavaScript:

    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]
    ];
    
    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
    });
    
    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));
    }
  </script>
</body>
</html>

Nach dem Login kopieren

Erklärung:

Erstellen Sie die Karte und ein Infofenster zur Anzeige von Markierungsinformationen.
Durchlaufen Sie das Standortarray und erstellen Sie eine Markierungsobjekt für jeden Standort.
Fügen Sie die Markierungen zur Karte hinzu.
Verwenden Sie einen Ereignis-Listener, um das Infofenster mit jedem Marker zu verknüpfen und beim Klicken den Namen des Standorts anzuzeigen.

Ergebnis:

Bei der Ausführung generiert der Code eine Google Map mit mehreren Markierungen, die die Standorte aus dem Eingabearray darstellen. Wenn Sie auf eine beliebige Markierung klicken, wird ein Infofenster geöffnet, in dem der Name angezeigt wird.

Abschlusshinweis:

Der Code verwendet Abschlüsse, um die Markierung und den Standortindex als Argumente an den Ereignis-Listener zu übergeben . Wenn Sie mit Schließungen nicht vertraut sind, bietet das Dev Center von Mozilla einen hilfreichen Leitfaden zu diesem Thema.

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe der JavaScript-API v3 ganz einfach mehrere Markierungen mit Infofenstern auf einer Google-Karte darstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!