Google Map Overlays

Hinzufügen einer Markierung in Google Maps

Google Maps - Overlays

Overlays sind Objekte in die Breite / Länge-Koordinaten auf der Karte, ziehen oder zoomen Sie die Karte gebunden werden mit Ihnen zu bewegen.

Google Maps API sind die folgenden Overlays:

Richten Sie Markierungen auf der Karte mit der oft zu zeigen, ein benutzerdefiniertes Symbol angezeigt werden soll. Marker sind Objekte GMarker Typ und kann verwendet werden, um die Arten von Objekten GIcon Symbol anpassen.
Linien auf der Karte mit Polylinien (eine Sammlung von Punkten darstellt) angezeigt werden. GPolyline Linie vom Typ Objekt.
Bereiche auf der Karte als Polygone angezeigt oder Boden-Overlay (wenn der Bereich eine beliebige Form ist) (wenn es ein rechteckiger Bereich ist). Polygon ähnlich einem geschlossenen Linienzug kann jede beliebige Form haben. Boden-Overlays werden häufig im Zusammenhang abzubilden, den Bereich mit Fliesen direkt oder indirekt verwendet.
Die Karte selbst wird angezeigt eine Kachel-Overlays verwenden. Wenn Sie eine Reihe von Fliesen besitzen, können Sie GTileLayerOverlay Klasse verwenden, um die vorhandenen Fliesen auf der Karte zu ändern, können Sie sogar GMapType verwenden Sie Ihre eigenen Kartentypen zu erstellen.
Informationsfenster ist auch eine besondere Art von Overlay. Beachten Sie jedoch, wird das Informationsfenster automatisch auf der Karte hinzugefügt werden, und die Karte kann nur eine Art GInfoWindow Objekt hinzufügen.

Google Maps - Add-Tag

Karte identifiziert Punkte auf der Platte. Standardmäßig verwenden sie G_DEFAULT_ICON (Sie auch ein benutzerdefiniertes Symbol angeben). GMarker Konstruktor GLatLng und GMarkerOptions (optional) Objekt als Parameter.

entworfen Stichworte interaktiv sein. Zum Beispiel in der Standardeinstellung die sie erhalten "klicken Sie auf" Ereignisse, die oft das Infofenster in den Ereignis-Listener zu öffnen verwendet.

Durch setMap () -Methode hinzufügen Markierungen auf der Karte:

Beispiele

var marker=new google.maps.Marker({
position:myCenter,
});

marker.setMap(map);

Versuchen »

Google Maps - ziehbar Marker

Im folgenden Beispiel wird beschrieben, wie der Animationseigenschaft verwenden, um den Marker zu ziehen:

Beispiele

marker=new google.maps.Marker({
position:myCenter,
animation:google.maps.Animation.BOUNCE
});

marker.setMap(map);

Versuchen »

Google Maps - Symbol

Tag können aus dem neuen Symbol definiert werden wird anstelle des Standardsymbol angezeigt:

Beispiele

var marker=new google.maps.Marker({
position:myCenter,
icon:'pinkball.png'
});

marker.setMap(map);

Versuchen »

Google Maps - Linienzug

GPolyline Objekt kann eine lineare Überlagerung auf der Karte erstellen. GPolyline umfassen eine Reihe von Punkten und erstellt eine Reihe von geordneten Linien, die diese Punkte verbindet.

Linienzug unterstützt die folgenden Eigenschaften:

Pfad - Geben Sie mehr als eine Zeile von Breiten- / Längenkoordinaten
stroke - gibt den hexadezimalen Farbwert der Zeile (Format: "# FFFFFF")
strokeOpacity - Transparenz bezeichnete Linie (der Wert 0,0 bis 1,0)
strokeWeight - Legt die Breite der Linie in Pixel an.
bearbeitet werden - ob der Benutzer die Definition einer geraden Linie bearbeiten können (true / false)

Beispiele

var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2
});

Versuchen »

Google Maps - Polygon

GPolygon Objekte sind ähnlich GPolyline Objekte, da sie eine Reihe von geordneten Punkten umfassen. Jedoch sind die Polygone zwei Endpunkten, aber das Design des geschlossenen Schleifenbereich wird die Bildung definiert.

Und die Linie, können Sie die Farbe und die Transparenz der Polygonkanten (Linien) Farbe, Dicke und Transparenz, sowie die Schließung der gefüllten Bereich anpassen. Farben sollten in numerische HTML-Hexadezimalwerte sein.

Polygon unterstützt die folgenden Attribute:

Pfad - mehrere lineare Breite Koordinaten (erste und letzte Koordinaten gleich sind) angeben
stroke - gibt den hexadezimalen Farbwert der Zeile (Format: "# FFFFFF")
strokeOpacity - Transparenz bezeichnete Linie (der Wert 0,0 bis 1,0)
strokeWeight - Legt die Breite der Linie in Pixel an.
fillColor - geschlossene Fläche bezeichnet hexadezimale Farbwerte (Format: "# FFFFFF")
fillOpacity - Transparenz geben Sie die Füllfarbe (die 0,0 bis 1,0 ist)
bearbeitet werden - ob der Benutzer die Definition einer geraden Linie bearbeiten können (true / false)

Beispiele

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
});

Versuchen »

Google Maps - Runde

Rund unterstützt die folgenden Eigenschaften:

Zentrum - der Mittelpunkt des Kreises angegebenen Parameter google.maps.LatLng
Radius - gibt den Radius des Kreises, in Metern
stroke - Gibt die Bogen hexadezimale Farbwerte (Format: "# FFFFFF")
strokeOpacity - Transparenz bezeichnet Bogen (der Wert 0,0 bis 1,0)
strokeWeight - Legt die Breite der Linie in Pixel an.
fillColor - gibt den hexadezimalen Farbwert des Kreises fill-Wert (Format: "# FFFFFF")
fillOpacity - Transparenz geben Sie die Füllfarbe (die 0,0 bis 1,0 ist)
Legt fest, ob der Benutzer eine gerade Linie bearbeiten können (true / false)

Beispiele

var myCity = new google.maps.Circle({
center:amsterdam,
radius:20000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});

Versuchen »