Google Maps -Grundlagen
Erstellen Sie eine einfache Google -Karte
Erstellen wir nun eine einfache Google Map.
Hier ist eine Google Map mit London, Großbritannien:
Beispiel
<html><head><scriptsrc="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script><script>function initialize(){var mapProp = { center:new google.maps.latlng (51.508742, -0.120850), Zoom: 5, MAPTYPEID: google.maps.maptypeid.RoadMap}; var map = new Google.maps.map.map (document.getElementById ("googlemap"), mapProp), }.maps.maps.maps.maps.Event.addomser (},}; initialisieren); </script> </head> <body> <div id = "googlemap"> </div> </body> </html>Beispielrenderungen (können direkt kopiert und direkt ausgeführt werden. Natürlich müssen Sie in der Lage sein, auf Google zugreifen zu können).
Beispielanalyse
Wir verwenden das obige Beispiel, um den Erstellungsprozess von Google Maps zu analysieren.
Warum deklariert ein Antrag HTML5?
<! DocType html>
Die meisten Browser verwenden "Standardmodus" HTML5 -Dokument -Rendering -Seiten, was bedeutet, dass Ihre Anwendung mit wichtigen Browsern kompatibel ist.
Wenn es kein DocType -Tag gibt, verwendet der Browser den Quirks -Modus, um den Seiteninhalt zu rendern.
TIPP: Es ist zu beachten, dass ein "promiscuous -modus" -CSS nicht mit dem Standardmodus verwendet werden kann. In bestimmten Anwendungen müssen alle prozentualen Größen aus dem übergeordneten Blockelement geerbt werden. Wenn im übergeordneten Modul keine Größe angegeben ist, beträgt der Standardwert 0 x 0 Pixel. Wenn Sie Prozentsätze verwenden möchten, können Sie sie wie folgt im <style> -T -Tag deklarieren:
<style type = "text/css"> html {Höhe: 100%} Körper {Höhe: 100%; Rand: 0; Polster: 0} #googlemap {Höhe: 100%} </style>Diese Stilanweisung zeigt an, dass das MAP -Modul (Googlemap) eine HTML -Höhe von 100%haben sollte.
Fügen Sie Google Maps API -Schlüssel hinzu
Die Google Maps -API muss im folgenden Beispiel in das erste <script> -Tag aufgenommen werden:
<script src = "http://maps.googleapis.com/maps/api/js?key=your_api_key&sensor=true_or_false"> </script>
Platzieren Sie den von Google generierten API -Schlüssel im Schlüsselparameter (KEY = YOUR_API_KEY).
Der Sensorparameter ist erforderlich, der angibt, ob die Anwendung einen Sensor (ähnlich der GPS -Navigation) verwendet, um den Standort des Benutzers zu finden. Der Parameterwert kann auf True oder False eingestellt werden.
Https
Wenn Ihre Anwendung eine sichere HTTP -Anwendung (HTTPS: HTTP Secure) ist, können Sie HTTPS verwenden, um die Google Maps -API zu laden:
<script src = "https://maps.googleapis.com/maps/api/js?key=your_api_key&sensor=true_or_false"> </script>
Asynchrone Beladung
In ähnlicher Weise können wir die Google Maps -API nach der voll geladenen Seite laden.
Das folgende Beispiel verwendet das Fenster.onload, um die vollständige Beladung von Google Maps zu erreichen. Die Funktion ladeScript () erstellt das Laden von Google Maps API <Script> -Tag. Zusätzlich wird der Parameter Callback = initialisieren am Ende des Tags hinzugefügt. Die Initialize (), da die Rückruffunktion nach voll geladener API ausgeführt wird:
Beispiel
<! DocType html> <html> <kopf> <script> Funktion initialize () {var mapprop = {center: new Google.maps.latlng (51.508742, -0.120850), Zoom: 7, MAPTYPEID: google.maptypyped.roadmap}; var map = new Google.maps.map (document.getElementById ("googeLemap"), mapprop);} Funktion ladeScript () {var script = document.createelement ("Skript"); script.type = "text/javaScript"; script.src = "http://maps.googleapis.com/maps/api/js?key=aizydydy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false&callback=initialize"; document.body.appendChild (Skript);} Fenster.Onload = loadscript; </script> </head> <body> <div id = "googlemap"> </div> </body> </html>Karteneigenschaften definieren
Vor der Initialisierung der Karte müssen wir ein Map -Eigenschaftsobjekt erstellen, um einige Karteneigenschaften zu definieren:
var mapprop = {center: new Google.maps.latlng (51.508742, -0.120850), Zoom: 7, MAPTYPEID: google.maps.maptypeid.roadMap};Zentrum (Mittelpunkt)
Die Mitte -Eigenschaft gibt den Zentrum der Karte an, wodurch ein Mittelpunkt auf der Karte durch Koordinaten (Breitengrad, Länge) erstellt wird.
Zoom (Zoom -Serie)
Die Zoom -Eigenschaft gibt den Zoombereich der Karte an. Zoom: 0 zeigt den vollen Zoom der gesamten Erdkarte.
MAPTYPEID (der anfängliche Typ der Karte)
Die MAPTYPEID -Eigenschaft gibt den Anfangstyp der Karte an.
MAPTYPEID enthält die folgenden vier Typen:
google.maps.maptypeid.hybrid: Die Hauptstraße transparente Ebene, die Satellitenbild anzeigt
google.maps.maptypeid.roadmap: Normale Straßenkarte zeigen
google.maps.maptypeid.satellite: Satellitenbild anzeigen
google.maps.maptypeid.terrain: Zeigen Sie Karten mit natürlichen Merkmalen wie Gelände und Vegetation
Wo können Google Maps angezeigt werden
Normalerweise wird Google Maps in <Div> Elementen verwendet:
<div id = "googlemap"> </div>
HINWEIS: Die Karte zeigt die Größe der Karte mit der in der DIV festgelegten Größe an, sodass wir die Größe der Karte im <Div> -Element festlegen können.
Erstellen Sie ein Kartenobjekt
var map = new Google.maps.map (document.getElementById ("googlemap"), mapprop);
Der obige Code verwendet den Parameter (MOPProp), um eine neue Karte im <Div> -Element zu erstellen (ID ist Googlemap).
Tipp: Wenn Sie auf der Seite mehrere Karten erstellen möchten, müssen Sie nur ein neues Kartenobjekt hinzufügen.
Das folgende Beispiel definiert vier Karteninstanzen (vier Karten verwenden unterschiedliche Kartentypen):
Beispiel
<html><head><scriptsrc="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script><script>function initialize(){ var mapProp = { center: new google.maps.latlng (51.508742, -0.120850), Zoom: 9, MAPTYPEID: google.maps.maptypeid.RoadMap}; var mapprop2 = {center: neu google.maps.latlng (51.508742, -0.120850), Zoom: 9, MAPTYPEID: google.maps.maptypeId.satellite}; var mapprop3 = {center: new Google.maps.latlng (51.508742, -0.120850), Zoom: 9, MAPTYPEID: google.maps.maptyped.hybrid}; var mapprop4 = {center: new Google.maps.latlng (51.508742, -0.120850), Zoom: 9, MAPTYPEID: google.maps.maptypeId.terrain}; var map = new Google.maps.map (document.getElementById ("googlemap"), mapprop); var map2 = new Google.maps.map (document.getElementById ("googlemap2"), mapprop2); var map3 = new Google.maps.map (document.getElementById ("googlemap3"), mapprop3); var map4 = new google.maps.Map(document.getElementById("googleMap4"),mapProp4);}google.maps.event.addDomListener(window, 'load', initialize);</script></head><body><div id="googleMap"></div><br><div id="googleMap2"></div><br><div id = "googlemap3"> </div> <br> <div id = "googlemap4"> </div> </body> </html>Laden der Karte
Nachdem das Fenster geladen wurde, wird das Kartenobjekt durch Ausführen der Funktion "Initialize () initialisiert, die sicherstellt, dass Google Maps nach voll geladenen Seite geladen wird:
google.maps.event.adddomListener (Fenster, "Laden", initialisieren);
Das obige ist eine Zusammenstellung der grundlegenden Informationen von Google Maps. Wir werden es später weiter hinzufügen. Vielen Dank für Ihre Unterstützung für diese Seite!