Google Maps Overlays

Fügen Sie eine Markierung auf der Google-Karte:

Google Maps - Overlays

Overlays sind Objekte auf der Karte, die Breite / Länge Koordinaten gebunden sind.

Google Maps bietet mehrere Arten von Overlays:

Marker - Einzelstandorte auf einer Karte. Markierungen können auch benutzerdefinierte Symbolbilder anzeigen
Polylinie - Serie von geraden Linien auf einer Karte
Polygon - Serie von geraden Linien auf einer Karte, und die Form ist "geschlossen"
Kreis und Rechteck
Info Fenster - Zeigt Inhalt innerhalb eines Popup-Ballon auf einer Karte
Benutzerdefinierte Overlays

Google Maps - Markierung hinzufügen

Der Marker-Konstruktor erstellt einen Marker. (Beachten Sie, dass die Position Eigenschaft festgelegt werden muss, um die Markierung anzuzeigen).

Fügen Sie die Markierung auf der Karte unter Verwendung der setMap() Methode:

Beispiel

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

marker.setMap(map);

Versuch es selber "

Google Maps - Animieren Sie den Marker

Das folgende Beispiel zeigt, wie Sie die Markierung mit der Animationseigenschaft zu animieren:

Beispiel

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

marker.setMap(map);

Versuch es selber "

Google Maps - Icon Statt Marker

Das folgende Beispiel gibt ein Bild (icon) anstelle des Standard - Marker zu verwenden:

Beispiel

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

marker.setMap(map);

Versuch es selber "

Google Maps - Linienzug

Eine Polylinie ist eine Linie, die durch eine Reihe von Koordinaten in einer geordneten Reihenfolge gezogen wird.

Eine Polylinie unterstützt die folgenden Eigenschaften:

Pfad - gibt mehrere Breite / Länge für die Linienkoordinaten
stroke - gibt eine hexadezimale Farbe für die Linie (format: "#FFFFFF")
strokeOpacity - gibt die Undurchsichtigkeit der Zeile (einen Wert zwischen 0,0 und 1,0)
strokeWeight - gibt das Gewicht des Schlaganfalls Linie in Pixel
editierbare - legt fest , ob die Linie von den Benutzern bearbeitet werden kann (true/false)

Beispiel

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

Versuch es selber "

Google Maps - Polygon

Ein Polygon ist ähnlich einer Polylinie, daß sie aus einer Reihe von Koordinaten in einer geordneten Sequenz besteht. Jedoch Polygone sind entworfen Regionen innerhalb einer geschlossenen Schleife zu definieren.

Polygone werden von geraden Linien, und die Form ist "closed" (alle Leitungen anschließen).

Ein Polygon unterstützt die folgenden Eigenschaften:

Pfad - gibt mehrere LatLng für die Linienkoordinaten (erste und letzte Koordinate gleich sind)
stroke - gibt eine hexadezimale Farbe für die Linie (format: "#FFFFFF")
strokeOpacity - gibt die Undurchsichtigkeit der Zeile (einen Wert zwischen 0,0 und 1,0)
strokeWeight - gibt das Gewicht des Schlaganfalls Linie in Pixel
fillColor - gibt eine hexadezimale Farbe für den Bereich innerhalb des umschlossenen Bereich (format: "#FFFFFF")
fillOpacity - gibt die Opazität der Füllfarbe (einen Wert zwischen 0,0 und 1,0)
editierbare - legt fest , ob die Linie von den Benutzern bearbeitet werden kann (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
});

Versuch es selber "

Google Maps - Kreis

Ein Kreis unterstützt die folgenden Eigenschaften:

Mitte - gibt die google.maps.LatLng der Mitte des Kreises
Radius - gibt den Radius des Kreises, in Metern
stroke - gibt eine hexadezimale Farbe für die Linie um den Kreis (format: "#FFFFFF")
strokeOpacity - gibt die Undurchsichtigkeit des Strichfarbe (einen Wert zwischen 0,0 und 1,0)
strokeWeight - gibt das Gewicht des Schlaganfalls Linie in Pixel
fillColor - gibt eine hexadezimale Farbe für den Bereich innerhalb des Kreises (format: "#FFFFFF")
fillOpacity - gibt die Opazität der Füllfarbe (einen Wert zwischen 0,0 und 1,0)
editierbare - legt fest , 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
});

Versuch es selber "

Google Maps - Infowindow

Zeigen Sie ein Infofenster mit einigen Textinhalt für einen Marker:

Beispiel

var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});

infowindow.open(map,marker);

Versuch es selber "