Google Maps - Overlay
Ein Overlay ist ein Objekt, das an einer Länge/Breitengrad -Koordinate auf der Karte gebunden ist und sich beim Ziehen oder Zoomen der Karte bewährt.
Die Google Maps -API hat die folgenden Overlays:
1. Die Punkte auf der Karte werden unter Verwendung von Markierungen angezeigt und benutzerdefinierte Symbole werden normalerweise angezeigt. Ein Tag ist ein Objekt vom Typ Gmarker, und das Symbol kann mit einem Objekt vom Typ Gicon angepasst werden.
2. Die Zeilen auf der Karte werden unter Verwendung von Polylines angezeigt (die eine Sammlung von Punkten darstellen). Eine Linie ist ein Objekt vom Typ Gpolyline.
3. Der Bereich auf der Karte wird als Polygon (falls es sich um eine willkürliche Form handelt) oder als Unterflächenüberlagerung (falls ein rechteckiger Bereich) angezeigt. Ein Polygon ähnelt einer geschlossenen Polylinie, daher kann es jede Form sein. Auf der Karte werden normalerweise Bodenüberlagerungen verwendet, die direkte oder indirekte Assoziationen mit Fliesen haben.
4. Die Karte selbst wird mit Fliesen -Overlays angezeigt. Wenn Sie eine eigene Reihe von Kacheln haben, können Sie die GTilelayerOverlay -Klasse verwenden, um die Kacheln zu ändern, die Sie bereits auf der Karte haben, oder sogar mit GMAPTYPE Ihren eigenen Kartentyp erstellen.
5. Das Informationsfenster ist auch eine spezielle Overlay -Ebene. Bitte beachten Sie jedoch, dass das Informationsfenster automatisch zur Karte hinzugefügt wird und die Karte nur ein Objekt vom Typ Ginfowindow hinzufügen kann.
Google Maps - Tags hinzufügen
Markieren Sie die Punkte auf der Karte. Standardmäßig verwenden sie g_default_icon (Sie können auch benutzerdefinierte Symbole angeben). Der Gmarker -Konstruktor nimmt Glatlng und Gmarkeroptions (optionale) Objekte als Parameter.
Die Marker sind interaktiv ausgelegt. Beispielsweise erhalten sie standardmäßig "Klickereignisse", die häufig zum Öffnen von Informationen in den Ereignishörern verwendet werden.
Fügen Sie ein Tag auf der Karte über die Methode setMap () hinzu:
Beispiel
<html> <Head> <criptsrc = "http://maps.googleapis.com/maps/api/js?key=aizydy0kkjitpvd2u7atoAWHC9YSH6OHXOiYM&sensor=false"> </script> var mycenter = new google.maps.latlng (51.508742, -0.120850); Funktion initialize () {var mapprop = {center: myCenter, zoom: 5, mapTypeid: google.maps.maptypeId.roadMap}; google.maps.marker ({Position: myCenter,}); marker.setMap (map);} google.maps.event.addomListener (Fenster, 'laden', initialize); </script> </head> <body> <div id = "googlemap"> </div> </body> </html>Beispiel -Rendering:
Google Maps - Dragbare Tags
Das folgende Beispiel beschreibt, wie die Animationseigenschaft verwendet wird, um ein Tag zu ziehen:
Beispiel
<html> <Head> <criptsrc = "http://maps.googleapis.com/maps/api/js?key=aizydy0kkjitpvd2u7atoAWHC9YSH6OHXOiYM&sensor=false"> </script> var mycenter = new google.maps.latlng (51.508742, -0.120850); var marker; function initialize () {var mapprop = {center: myCenter, zoom: 5, mapTyped: google.maps.maptypeid.roadmap}; var map = new google.maps.map (document.getElementById ("googeLemap"), mapprop); marker = new Google.maps.marker ({Position: myCenter, Animation: google.maps.Animation.Bounce}); id = "googlemap"> </div> </body> </html>Google Maps - Symbol
Tags können mit einem benutzerdefinierten neuen Symbol anstelle des Standardsymbols angezeigt werden:
Beispiel
<html> <Head> <criptsrc = "http://maps.googleapis.com/maps/api/js?key=aizydy0kkjitpvd2u7atoAWHC9YSH6OHXOiYM&sensor=false"> </script> var mycenter = new google.maps.latlng (51.508742, -0.120850); Funktion initialize () {var mapprop = {center: myCenter, zoom: 5, mapTypeid: google.maps.maptypeId.roadMap}; google.maps.Marker({ position:myCenter, icon:'pinkball.png' });marker.setMap(map);}google.maps.event.addDomListener(window, 'load', initialize);</script></head><body><div id="googleMap"></div></body></html>Google Maps - Faltungsleitungen
GPOLYLINE -Objekte erstellen lineare Overlays auf Karten. Gpolyline enthält eine Reihe von Punkten und erstellt eine Reihe von Liniensegmenten, die diese Punkte ordentlich verbinden.
Polylines unterstützen die folgenden Eigenschaften:
Pfad - Gibt die Koordinaten von Breiten-/Längengrad -Koordinaten mehrerer gerader Linien an
StrokeColor - Gibt den hexadezimalen Farbwert der Linie an (Format: "#ffffff")
Schlaganfall - Gibt die Transparenz einer Linie an (der Wert beträgt 0,0 bis 1,0)
Schlaganfall - definiert die Breite der Linie in Pixeln.
Bearbeitbar - Definiert, ob der Benutzer eine gerade Linie bearbeiten kann (True/False)
Beispiel
<html> <Head> <criptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7oaAWHC9YSH6OHXOiYM&sensor=false"> </script> <script> var x = new google.maps.latlng (52,395715,4,888916); var stavanger = new Google.Maps.latlng (58.983991,5,734863); var Amsterdam = new Google.maps.latlng (52.395715,4.888916); google.maps.latlng (51.508742, -0.120850); Funktion initialize () {var mapprop = {center: x, zoom: 4, mapTypeid: google.maps.maptypeid.roadmap}; var map = new Google.maps.map (document.getElementById ("googlemap"), mapprop); var myTrip = [Stavanger, Amsterdam, London]; var flugpath = new Google.maps.polyline ({Pfad: MyTrip, Strokecolor: "#0000ffr }); flugpath.setMap (map);} google.maps.event.adddomListener (Fenster, 'laden', initialize); </script> </head> <body> <div id = "googlemap"> </div> </body> </html>Beispiel -Rendering:
Google Maps - Polygone
GPOLYGON -Objekte ähneln GPOLYLINE -Objekten insofern, da sie alle eine Reihe von geordneten Punkten enthalten. Anstatt zwei Endpunkte wie Polylines zu haben, sind Polygone jedoch so konzipiert, dass sie Bereiche definieren, die geschlossene Schleifen bilden.
Wie Polylines können Sie die Farbe, Dicke und Transparenz von Polygonkanten (Linien) sowie die Farbe und Transparenz von geschlossenen Füllbereichen anpassen. Die Farbe sollte im html -Stil von hexadezimaler Nummer sein.
Polygone unterstützen die folgenden Eigenschaften:
Pfad - Gibt die Koordinaten mehrerer gerader Linienbreiten an (die ersten und letzten Koordinaten sind gleich)
StrokeColor - Gibt den hexadezimalen Farbwert der Linie an (Format: "#ffffff")
Schlaganfall - Gibt die Transparenz der Linie an (dieser Wert beträgt 0,0 bis 1,0)
Schlaganfall - definiert die Breite der Linie in Pixeln.
FillColor - Gibt den hexadezimalen Farbwert für den geschlossenen Bereich an (Format: "#ffffff")
Fülle - Gibt die Transparenz der Füllfarbe an (der Wert beträgt 0,0 bis 1,0)
Bearbeitbar - Definiert, ob der Benutzer eine gerade Linie bearbeiten kann (True/False)
Beispiel
<html> <Head> <criptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7oaAWHC9YSH6OHXOiYM&sensor=false"> </script> <script> var x = new google.maps.latlng (52,395715,4,888916); var stavanger = new Google.Maps.latlng (58.983991,5,734863); var Amsterdam = new Google.maps.latlng (52.395715,4.888916); google.maps.latlng (51.508742, -0.120850); Funktion initialize () {var mapprop = {center: x, zoom: 4, mapTypeid: google.maps.maptypeid.roadmap}; var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);var myTrip=[stavanger,amsterdam,london,stavanger];var flightPath=new google.maps.Polygon({ path:myTrip, strokeColor:"#0000FF", strokeOpacity:0.8, strokeWeight:2, fillColor: "#0000ff", fillopacity: 0.4}); flugpath.setmap (map);} google.maps.event.addomListener (Fenster, 'laden', initialize); </script> </head> <body> <div id = "googlemap"> </div> </body> </html>Beispiel -Rendering:
Google Maps - Kreis
Kreise unterstützen die folgenden Eigenschaften:
Mitte - Geben Sie den Mittelpunktparameter des Kreises Google.maps.latlng an
Radius - Gibt den Radius des Kreises in Metern an
StrokeColor - Gibt den hexadezimalen Farbwert des Bogens an (Format: "#ffffff")
Schlaganfall - Gibt die Transparenz des Bogens an (der Wert beträgt 0,0 bis 1,0)
Schlaganfall - definiert die Breite der Linie in Pixeln.
FillColor - Gibt den hexadezimalen Farbwert -Füllwert des Kreises an (Format: "#ffffff")
Fülle - Gibt die Transparenz der Füllfarbe an (der Wert beträgt 0,0 bis 1,0)
Definiert, ob der Benutzer eine gerade Linie bearbeiten kann (True/False)
Beispiel
<html> <Head> <criptsrc = "http://maps.googleapis.com/maps/api/js?key=aizydy0kkjitpvd2u7atoAWHC9YSH6OHXOIM&sensor=false"> </script> var Amsterdam = New = New = New = New = New = New = New = New = New = New = New = New = New = New = New = New = New = New = New = New = New = New = New = New = New = New = New = New = New = New = New = New = New = New = New = New google.maps.latlng (52.395715,4.888916); Funktion initialize () {var mapprop = {Mitte: Amsterdam, Zoom: 7, MAPTYPEID: google.maps.maptypeId.RoadMap}; var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);var myCity = new google.maps.Circle({ center:amsterdam, radius:20000, strokeColor:"#0000FF", strokeOpacity:0.8, strokeWeight:2, fillColor:"#0000FF", fillOpacity:0.4 }); MyCity.setMap (MAP);} google.maps.event.adddomListener (Fenster, 'laden', initialize); </script> </head> <body> <div id = "googlemap"> </div> </body> </html>Beispiel -Rendering:
Google Maps - Informationsfenster
Zeigen Sie ein SMS -Fenster auf einem Tag an:
Beispiel
<html> <Head> <criptsrc = "http://maps.googleapis.com/maps/api/js?key=aizydy0kkjitpvd2u7atoAWHC9YSH6OHXOiYM&sensor=false"> </script> var mycenter = new google.maps.latlng (51.508742, -0.120850); Funktion initialize () {var mapprop = {center: myCenter, zoom: 5, mapTypeid: google.maps.maptypeId.roadMap}; google.maps.Marker({ position:myCenter, });marker.setMap(map);var infowindow = new google.maps.InfoWindow({ content:"Hello World!" });infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', initialize);</script></head><body><div id = "googlemap"> </div> </body> </html>Beispiel -Rendering:
Das obige ist eine Zusammenstellung der Informationen über die Überlagerung von Google Maps. Wir werden es später weiter hinzufügen. Vielen Dank für Ihre Unterstützung für diese Seite!