Google Maps -Overlays
Google Maps - Overlays
Overlays sind Objekte auf der Karte, die an Breiten-/Längengradkoordinaten gebunden sind.
Google Maps verfügt über mehrere Arten von Overlays:
- Marker - Einzelne Orte auf einer Karte. Markierungen können auch benutzerdefinierte Symbolbilder anzeigen
- Polylinie - Reihe von geraden Linien auf einer Karte
- Polygon – Reihe von geraden Linien auf einer Karte, und die Form ist „geschlossen“
- Kreis und Rechteck
- Infofenster – Zeigt Inhalte in einer Popup-Sprechblase über einer Karte an
- Benutzerdefinierte Überlagerungen
Google Maps - Markierung hinzufügen
Der Marker-Konstruktor erstellt einen Marker. Beachten Sie, dass die Positionseigenschaft festgelegt werden muss, damit die Markierung angezeigt wird.
Fügen Sie die Markierung mithilfe der Methode setMap() zur Karte hinzu:
Beispiel
var marker = new google.maps.Marker({position: myCenter});
marker.setMap(map);
Google Maps - Animieren Sie die Markierung
Das folgende Beispiel zeigt, wie Sie den Marker mit der Animationseigenschaft animieren:
Beispiel
var
marker = new google.maps.Marker({
position:myCenter,
animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);
Google Maps - Icon statt Marker
Das folgende Beispiel gibt ein Bild (Symbol) an, das anstelle der Standardmarkierung verwendet werden soll:
Beispiel
var marker = new google.maps.Marker({
position:myCenter,
icon:'pinkball.png'
});
marker.setMap(map);
Google Maps - Polylinie
Eine Polylinie ist eine Linie, die in einer geordneten Reihenfolge durch eine Reihe von Koordinaten gezogen wird.
Eine Polylinie unterstützt die folgenden Eigenschaften:
- Pfad - gibt mehrere Breiten-/Längenkoordinaten für die Linie an
- StrokeColor - gibt eine hexadezimale Farbe für die Linie an (Format: "#FFFFFF")
- StrokeOpacity - gibt die Deckkraft der Linie an (ein Wert zwischen 0,0 und 1,0)
- StrokeWeight - gibt die Strichstärke der Linie in Pixeln an
- editable - definiert, ob die Zeile von Benutzern editierbar ist (true/false)
Beispiel
var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2
});
Google Maps - Vieleck
Ein Polygon ähnelt einer Polylinie darin, dass es aus einer Reihe von Koordinaten in einer geordneten Reihenfolge besteht. Polygone sind jedoch so konzipiert, dass sie Regionen innerhalb einer geschlossenen Schleife definieren.
Polygone bestehen aus geraden Linien und die Form ist "geschlossen" (alle Linien sind miteinander verbunden).
Ein Polygon unterstützt die folgenden Eigenschaften:
- path - gibt mehrere LatLng-Koordinaten für die Linie an (erste und letzte Koordinate sind gleich)
- StrokeColor - gibt eine hexadezimale Farbe für die Linie an (Format: "#FFFFFF")
- StrokeOpacity - gibt die Deckkraft der Linie an (ein Wert zwischen 0,0 und 1,0)
- StrokeWeight - gibt die Strichstärke der Linie in Pixeln an
- fillColor - gibt eine hexadezimale Farbe für den Bereich innerhalb des eingeschlossenen Bereichs an (Format: "#FFFFFF")
- fillOpacity - gibt die Deckkraft der Füllfarbe an (ein Wert zwischen 0,0 und 1,0)
- editable - definiert, ob die Zeile von Benutzern editierbar ist (true/false)
Beispiel
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
});
Google Maps - Kreis
Ein Kreis unterstützt die folgenden Eigenschaften:
- center - gibt die google.maps.LatLng des Mittelpunkts des Kreises an
- Radius - gibt den Radius des Kreises in Metern an
- StrokeColor - gibt eine hexadezimale Farbe für die Linie um den Kreis an (Format: "#FFFFFF")
- StrokeOpacity - gibt die Deckkraft der Strichfarbe an (ein Wert zwischen 0,0 und 1,0)
- StrokeWeight - gibt die Strichstärke der Linie in Pixeln an
- fillColor - gibt eine hexadezimale Farbe für den Bereich innerhalb des Kreises an (Format: "#FFFFFF")
- fillOpacity - gibt die Deckkraft der Füllfarbe an (ein Wert zwischen 0,0 und 1,0)
- bearbeitbar - definiert, ob der Kreis von Benutzern bearbeitet werden kann (true/false)
Beispiel
var myCity = new google.maps.Circle({
center:amsterdam,
radius:20000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
Google Maps - Infofenster
Zeigen Sie ein InfoWindow mit etwas Textinhalt für eine Markierung an:
Beispiel
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
infowindow.open(map,marker);