Heim > Artikel > Web-Frontend > So richten Sie eine interaktive Karte mithilfe der Google Maps API in JavaScript ein

So richten Sie eine interaktive Karte mithilfe der Google Maps API in JavaScript ein

PHPzOriginal: 2023-04-26 10:30:37781Durchsuche

Mit der Entwicklung des Web-Netzwerks ist JavaScript als leistungsstarke Programmiersprache zu einem unverzichtbaren Bestandteil geworden. In JavaScript können Sie die Google Maps API verwenden, um interaktive Karten zu erstellen. Gerade im Online-Geschäft ist dies eine sehr nützliche Funktion. In diesem Artikel erklären wir, wie Sie mithilfe der Google Maps API in JavaScript eine interaktive Karte einrichten.

Schritt eins: Besorgen Sie sich den Google Maps-API-Schlüssel

Zuerst müssen wir unseren eigenen Google Maps-API-Schlüssel besorgen. Die Verwendung eines API-Schlüssels ermöglicht uns die Nutzung der Google Maps API.

Um den API-Schlüssel zu erhalten, erstellen Sie zunächst ein Google Cloud-Konto. Nach der Erstellung des Kontos müssen wir zur Seite der Google Cloud Console gehen. Von dort aus können wir den Google Maps-API-Schlüssel erstellen.

Schritt 2: Karte erstellen

Als nächstes müssen wir eine Karte in einer HTML-Datei erstellen. Dies kann durch Hinzufügen des folgenden Codes in der HTML-Datei erfolgen:

<!DOCTYPE html>
<html>
  <head>
    <title>设置地图</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
        /* 添加样式，设置地图大小 */
        #map {
          height: 400px;
          width: 100%;
         }
    </style>
  </head>
  <body>
    <h3>这是一个简单的地图</h3>
    <div id="map"></div>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>  
    <script>
        function initMap() {
          var map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: YOUR_LATITUDE, lng: YOUR_LONGITUDE},
            zoom: 8
          });
        }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script> 
  </body>
</html>

In der obigen HTML-Datei haben wir ein div-Element verwendet, um die Größe der Karte festzulegen. Als nächstes haben wir im JavaScript-Code den API-Schlüssel zusammen mit dem Breiten- und Längengrad (YOUR_LATITUDE und YOUR_LONGITUDE) verwendet, um den Mittelpunkt und die Zoomstufe der Karte festzulegen. Abschließend übergeben wir die Funktion initMap() als Callback-Funktion an die API, sodass sie automatisch aufgerufen wird, wenn die API das Laden der Karte abgeschlossen hat.

Schritt drei: Markierungen hinzufügen

Mit der Google Maps-API können wir der Karte auch Markierungen hinzufügen. Wir können Markierungen auf der Karte setzen, um interessante Orte zu markieren.

Als nächstes müssen wir den folgenden Code zum JavaScript-Code hinzufügen:

var marker = new google.maps.Marker({
    position: {lat: YOUR_LATITUDE, lng: YOUR_LONGITUDE},
    map: map,
    title: '这里是我的标记!'
});

Der obige Code setzt eine Markierung auf der Karte und setzt den Titel auf „Hier ist meine Markierung!“. YOUR LATITUDE und YOUR LONGITUDE sind der Breiten- und Längengrad des zu markierenden Standortpunktes.

Schritt 4: Informationsfenster hinzufügen

Das Informationsfenster ermöglicht es uns, der Markierung weitere nützliche Informationen hinzuzufügen. Wenn wir auf eine Markierung klicken, können wir ein Informationsfenster öffnen, das weitere Informationen anzeigt.

Als nächstes müssen wir den folgenden Code zum JavaScript-Code hinzufügen:

var contentString = '<h3>这是我的标记!</h3><p>这里是更多的信息...</p>';

var infowindow = new google.maps.InfoWindow({
    content: contentString
});

Der obige Code erstellt eine Zeichenfolge namens „contentString“, die den Titel und den Inhalt enthält, die im Informationsfenster angezeigt werden sollen. Als nächstes erstellen Sie ein Informationsfenster mit dem Namen „infowindow“, das den Inhalt des ContentString-Strings enthält.

Abschließend binden wir das Ereignis an den Marker, sodass sich beim Klicken auf den Marker das Infofenster öffnet.

marker.addListener('click', function() {
    infowindow.open(map, marker);
});

Der obige Code öffnet das Informationsfenster, wenn auf den Präsentator geklickt wird.

Zusammenfassend können wir sehen, wie man die Google Maps API in JavaScript verwendet, um eine interaktive Karte einzurichten und Markierungen und Informationsfenster hinzuzufügen. Diese Funktionen können sehr nützliche Zuordnungsfunktionen für verschiedene Arten von Online-Anwendungen bereitstellen.

Das obige ist der detaillierte Inhalt vonSo richten Sie eine interaktive Karte mithilfe der Google Maps API in JavaScript ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：So implementieren Sie FFT mit JavaScriptNächster Artikel：So implementieren Sie FFT mit JavaScript

In Verbindung stehende Artikel

Mehr sehen