Dies ist nur eine kleine Auswahl dessen, was wir mit der JavaScript-API von Google Maps tun können. Es gibt auch andere fortgeschrittene Verwendungsmöglichkeiten. Dazu müssen wir jedoch zunächst wissen, was wir benötigen, um es verwenden zu können. Dies ist der erste Punkt, der in diesem Lernprogramm behandelt wird.
Abrufen der Anmeldeinformationen für die API
Um die API in unsere Entwicklungen einzubeziehen und ihre Funktionalität für die Erstellung der Karten zu nutzen, ist es erforderlich, dass wir die Anmeldeinformationen des Entwicklers für die Google Maps-JavaScript-API einholen, auch wenn dies kompliziert klingt. Nehmen Sie ein paar einfache Schritte, um es zu erhalten, mal sehen:
[/color] [color = # 696969] 1 [/ color]
Zuerst müssen wir die Seite der Google Developer Console aufrufen, wenn wir als Erstes eine Meldung zur Verwendung der Entwicklerkonsole aufrufen. Darin werden die Vorteile beim Erstellen eines API-Projekts angegeben . Um zum nächsten Schritt zu gelangen, drücken Sie die Taste Schaltfläche Projekt erstellen:
[/color] [color = # 696969] 2 [/ color]
Nachdem wir unser Projekt erstellt haben, müssen wir aus der Liste die API suchen, die wir benötigen. In diesem Fall ist es die Google Maps Javascript API v3. Klicken Sie auf den Link, um zu einem Bildschirm zu gelangen, in dem wir die Verwendung der API aktivieren können, indem Sie auf die Schaltfläche Deaktivieren klicken:
[/color] [color = # 696969] 3 [/ color]
Aktivieren Sie das Kontrollkästchen, um die Nutzungsbedingungen zu akzeptieren, und klicken Sie auf OK. Die API wird aktiviert, die Anmeldeinformationen müssen jedoch noch eingeholt werden.
[/color] [color = # 696969] 4 [/ color]
Dazu müssen wir zur Option ” Anmeldeinformationen ” im Seitenmenü gehen, diese eingeben und auf die Option ” Neues Passwort erstellen” klicken. Es wird ein Dialogfeld angezeigt, in dem die Arten der Schlüssel angegeben werden, die wir generieren können. Aus den Optionen wählen wir ” Serverschlüssel” , der sich anpasst Lassen Sie das Feld leer und klicken Sie auf die Schaltfläche Erstellen , um den Zugriff auf eine IP-Adresse für die Verwendung der API zu ermöglichen.
[/color] [color = # 696969] 5 [/ color]
Danach generieren wir unseren Schlüssel, den wir zur Hand haben müssen, um ihn in unsere Beispiele aufzunehmen. Dieser Schlüssel ist in der folgenden Abbildung zu sehen, die mit dem Feld “Schlüssel-API” beschrieben wird :
Wichtige Parameter für die Karte
Nachdem die Voraussetzungen für die Verwendung der API erfüllt sind, sollten wir uns die Parameter ansehen, die wir beim Erstellen unserer Karten kennen und mit denen wir vertraut sein sollten:
Einfache Karte
Nachdem wir bereits die Parameter gesehen haben, die wir für die Erstellung unserer Karten benötigen, und die Schritte, um unsere Entwickleranmeldeinformationen zu erhalten, ist es an der Zeit, mit dem praktischen Teil dieses Tutorials fortzufahren und zu sehen, wie eine einfache Karte erstellt wird. Sehen wir uns die folgenden Schritte an:
[/color] [color = # 696969] 1 [/ color]
Zuerst erstellen wir ein Dokument mit dem Namen simple_map.html. Um die Klassen und Methoden des Dokuments nutzen zu können, müssen Sie die API einbinden. An dieser Stelle müssen Sie den Berechtigungsnachweis für die Verwendung der API angeben. Im folgenden Code können Sie diesen Wert als ersetzen Wir geben es in Großbuchstaben an:
<html> <head> <script type = "text / javascript" src = "https://maps.googleapis.com/maps/api/js? key = CREDENTIAL_AQUI & sensor = false "> </ script>
[/color] [color = # 696969] 2 [/ color]
Dann müssen wir die Karte an dem entsprechenden Abschnitt fixieren, der der <head> wäre . Für diese verwenden wir die <style> -Tags und geben ihnen die Maße von 800 px Breite und 500 px Höhe an. Schauen wir uns an, wie es in unserem Code aussieht:
<style type = "text / css"> #mapaDiv {width: 800px; Höhe: 500px; } </ style>
[/color] [color = # 696969] 3 [/ color]
Wenn wir dies getan haben, müssen wir zur Stärke unseres Codes gehen und unseren Code erstellen. Dazu öffnen wir ein <script> -Tag und innerhalb dieses erstellen wir eine Funktion, in der wir als erstes die Themen für die Karte mit visualRefresh aktivieren müssen Verwenden Sie das mapOptions- Objekt, um die Optionen unserer Karte festzulegen. Sehen wir uns an, wie unsere Funktion im Moment aussieht:
<script type = "text / javascript"> var map; Funktion startMap () { google.maps.visualRefresh = true; var mapOptions = { Mitte: neues google.maps.LatLng (40.41678, -3.70379), Zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP };
Es ist wichtig, die Optionen hervorzuheben, die wir in unserer Karte aus dem vorherigen Code verwenden. Für den Mittelwert verwenden wir die Madrider Koordinaten . Für einen anderen Ort können wir die Koordinaten im Internet suchen und sie in unserem Code ändern. Dann haben wir den Zoom mit einem Wert von 10 Es wäre ein Durchschnittswert und schließlich definieren wir den Basistyp als Straßenkarte.
[/color] [color = # 696969] 4 [/ color]
Jetzt müssen wir nur noch unsere Map initialisieren und zu dem entsprechenden Div mit der ID mapaDiv hinzufügen :
var mapElement = document.getElementById ('mapDiv'); map = new google.maps.Map (mapElement, mapOptions); } google.maps.event.addDomListener (Fenster 'Laden', startMap);
[/color] [color = # 696969] 5 [/ color]
Schließlich schließen wir den Rest unserer Tags und erstellen unser HTML-Dokument und fügen ein div mit der ID ein, die wir zuvor erwähnt haben, damit die Map darin geleert wird:
</ script> </ head> <body> <b> Einfache Karte </ b> </ br> </ br> <div id = "mapDiv"> </ div> </ body> </ html>
[/color] [color = # 696969] 6 [/ color]
Wir führen unseren Code in unserem Browser über den von uns installierten Webserver wie Apache aus. Das Ergebnis sollte folgendermaßen aussehen:
Da die Erstellung einer Karte mit der Javascript-API recht einfach und anpassbar ist, ist dies nur ein Beispiel dafür, was wir tun können. Im folgenden Beispiel sehen wir eine Variante unseres Tools, die sicherlich sehr nützlich sein wird.
Einfache Vollbildkarte
Wir konnten bereits eine einfache Karte mit einer Position in unserem festen Browser erstellen. Wenn wir jedoch möchten, dass sie im Vollbildmodus angezeigt wird, sollten wir nur eine kleine Änderung an unserem vorherigen Code vornehmen. Dann haben wir das, was wir brauchen. Lassen Sie uns sehen, was wir tun sollen:
[/color] [color = # 696969] 1 [/ color]
Um den Code aus unserer vorherigen Map nicht zu löschen, erstellen wir ein neues Dokument mit dem Namen map_pantalla_completa.html und fügen den vollständigen Code von mapa_simple.html ein.
[/color] [color = # 696969] 2 [/ color]
Dazu müssen wir das <style> -Tag suchen und einige Änderungen vornehmen, die es uns ermöglichen, unsere Karte im Vollbild anzuzeigen. Dabei werden die Werte für Breite und Höhe des HTML- , Body- und Div- Elements geändert, in das wir die Karte einfügen:
<style type = "text / css"> HTML {Höhe: 100%} Körpergröße: 100%; Rand: 0; } #mapaDiv {width: 100%; Höhe: 100%; } </ style>
[/color] [color = # 696969] 3 [/ color]
Zum Abschluss müssen wir nur mapa_pantalla_completa.html ausführen und in unserem Browser sollte dies folgendermaßen aussehen :
Ändern der Kartenbasis
Einer der wichtigsten Aspekte bei der Erstellung der Karten ist die Verwendung der Basen. Diese Basen zeigen uns Satellitenbilder, Straßen und sogar Gelände, die für verschiedene Arten von Situationen verwendet werden können.
Zum Beispiel kann der Standort unseres Lieblingsbuchladens mit einer Straßengrundkarte angezeigt werden, aber nicht mit einer Satellitengrundkarte. Dies ist jedoch nützlich, um zu zeigen, ob ein Plot korrekt gezeichnet wurde.
Google Maps verfügt über vier verschiedene Arten von Kartengrundlagen: Straße, Satellit, Hybrid und Gelände . In dem folgenden Beispiel werden wir eine Funktionalität erstellen, mit der wir den Basistyp für unsere Karte ändern und somit jeden von ihnen visualisieren können. Sehen wir uns die folgenden Schritte an:
[/color] [color = # 696969] 1 [/ color]
Wie in den vorherigen Beispielen haben wir eine neue Datei erstellt, diesmal base_maps.html aufgerufen und den Code aus der Datei simple_map.html kopiert .
[/color] [color = # 696969] 2 [/ color]
Dann müssen wir die Funktion startMap () lokalisieren und, nachdem sie beendet ist, eine neue Funktion erstellen, die die Ereignisse einiger Schaltflächen verarbeitet, mit denen wir die Basis für unsere Karte ändern können. Schauen wir uns an, wie der Code für das, was wir gerade haben, aussieht erklären:
Funktionsereignisse Buttons () { document.getElementById ('btnCar' ) .addEventListener ('click', function () { map.setMapTypeId (google.maps.MapTypeId.ROADMAP); }); document.getElementById ('btnSat' ) .addEventListener ('click', function () { map.setMapTypeId (google.maps.MapTypeId.SATELLITE); }); document.getElementById ('btnHib' ) .addEventListener ('click', function () { map.setMapTypeId (google.maps.MapTypeId.HYBRID); }); document.getElementById ('btnTer' ) .addEventListener ('click', function () { map.setMapTypeId (google.maps.MapTypeId.TERRAIN); }); }
[/color] [color = # 696969] 3 [/ color]
Schließlich müssen wir nur die Schaltflächen in unserem HTML erstellen, dies tun wir vor unserem div, ohne zu vergessen, den Onclick zu der Funktion eventsButtons () hinzuzufügen und die IDs zu platzieren, die wir in den Ereignissen unserer Funktion verwenden:
<input id = "btnCar" type = "button" value = "Road" onclick = "eventsButtons ();"> <input id = "btnSat" type = "button" value = "Satellite" onclick = "eventsButtons ();"> <input id = "btnHib" type = "button" value = "Hybrid" onclick = "eventsButtons ();"> <input id = "btnTer" type = "button" value = "Terrain" onclick = "eventsButtons ();">
[/color] [color = # 696969] 4 [/ color]
Wir führen das Beispiel in unserem Browser aus und drücken den Hybrid- Button, der so aussehen sollte:
Damit schließen wir dieses Tutorial ab, in dem wir lernen konnten, die Javascript-API von Google Maps für die Konstruktion einfacher Karten zu verwenden, und obwohl ihre Implementierung und Verwendung etwas komplex ist, hat sie ein beispielloses Hilfsprogramm, das es sich lohnt, ein wenig zu brechen der Kopf zu lernen, das gleiche in seiner Gesamtheit zu verwenden.
