Overlays
- Ãœbersicht der Karten-Overlays
- Markierungen
- Polylinien
- Polygone
- Boden-Overlays
- Kachel-Overlays
- Ebenen
Ãœbersicht der Karten-Overlays
Overlays sind Objekte auf der Karte, die an Breiten- und Längenkoordinaten gebunden sind. Sie bewegen sich daher, wenn Sie die Karte ziehen oder zoomen. Overlays geben Objekte wieder, die Sie zur Karte hinzufügen, um Punkte, Linien oder Bereiche zu kennzeichnen.Das Maps-API besitzt verschiedene Overlay-Typen:
• Punkte werden auf der Karte mithilfe von Markierungen angezeigt und häufig durch ein benutzerdefiniertes Symbol gekennzeichnet. Markierungen sind Objekte vom Typ GMarker und können den Typ GIcon verwenden.
• Linien werden auf der Karte mithilfe von Polylinien dargestellt, die für eine Sammlung von Punkten stehen. Linien sind Objekte des Typs GPolyline.
• Ein Bereich wird auf der Karte entweder als Polygon angezeigt, wenn er eine unregelmäßige Form besitzt, oder als Boden-Overlay, wenn es sich um einen rechteckigen Bereich handelt. Polygone ähneln Polylinien insofern, als dass sie aus einer Sammlung von Punkten bestehen. Diese bilden eine geschlossene, beliebig gestaltete Form. Boden-Overlays werden häufig für Bereiche verwendet, die Kacheln auf der Karte direkt oder indirekt zugeordnet sind.
• Die Karte selbst wird mithilfe eines Kachel-Overlays angezeigt. Sie können dies mit Ihren eigenen Kacheln ändern, indem Sie ein GTileLayerOverlay verwenden Ihren Kartentyp mit einem GMapType erstellen.
• Bei dem Infofenster handelt es sich ebenfalls um eine spezielle Art von Overlay. Beachten Sie jedoch, dass das Infofenster automatisch zur Karte hinzugefügt wird, und dass einer Karte nur ein Objekt des Typs GInfoWindow zugeordnet werden kann.
Die einzelnen Overlays implementieren das GOverlay-Interface. Overlays können mithilfe der Methode GMap2.addOverlay() zu einer Karte hinzugefügt und mithilfe der Methode GMap2.removeOverlay() aus einer Karte entfernt werden. (Beachten Sie, dass das Infofenster standardmäßig zur Karte hinzugefügt wird.)
Markierungen
zurück zum StartMarkierungen kennzeichnen Punkte auf einer Karte. Standardmäßig verwenden sie das G_DEFAULT_ICON, Sie können aber auch ein benutzerdefiniertes Symbol angeben. Der Konstruktor GMarker verwendet GLatLng und optional ein GMarkerOptions-Objekt als Argumente.
Markierungen sind interaktiv. Sie erhalten standardmäßig beispielsweise "click"-Ereignisse und werden häufig in Ereignis-Listeners verwendet, um Infofenster aufzurufen.
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
// Add 10 markers to the map at random locations
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
}
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
// Add 10 markers to the map at random locations
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
map.addOverlay(new GMarker(point)); southWest.lng() + lngSpan * Math.random());
}
Beispiel anzeigen (marker-simple.html)
Frei verschiebbare Markierungen
zurück zum StartMarkierungen sind interaktive Objekte, die Sie anklicken und an eine andere Position verschieben können. In diesem Beispiel platzieren wir eine verschiebbare Markierung auf die Karte und achten auf einige ihrer einfacheren Ereignisse. Frei verschiebbare Markierungen implementieren zur Angabe des Verschiebestatus vier Arten von Ereignissen (click, dragstart, drag und dragend), um ihren Verschiebestatus anzuzeigen. Standardmäßig können Markierungen angeklickt, jedoch nicht verschoben werden, daher muss bei ihrer Initialisierung die zusätzliche Markierungsoption draggable auf "true" gesetzt sein. Frei verschiebbare Markierungen "hüpfen" standardmäßig auf und ab. Sie können dieses Verhalten ändern, indem Sie die Option bouncy auf "false" setzen. Die Markierung schwebt dann anmutig an ihren Platz.
var map = new GMap2(document.getElementById("map_canvas"));
var center = new GLatLng(37.4419, -122.1419);
map.setCenter(center, 13);
var marker = new GMarker(center, {draggable: true});
GEvent.addListener(marker, "dragstart", function() {
GEvent.addListener(marker, "dragend", function() {
map.addOverlay(marker);
var center = new GLatLng(37.4419, -122.1419);
map.setCenter(center, 13);
var marker = new GMarker(center, {draggable: true});
GEvent.addListener(marker, "dragstart", function() {
map.closeInfoWindow();
});
GEvent.addListener(marker, "dragend", function() {
marker.openInfoWindowHtml("Just bouncing along...");
});
map.addOverlay(marker);
Beispiel anzeigen (marker-drag.html)
Symbole
zurück zum StartFür Markierungen können Symbole definiert werden, die anstelle des Standardsymbols angezeigt werden. Die Definition eines Symbols ist komplex, da ein einzelnes Symbol in der Maps-API aus verschiedenen Bildern besteht. Ein Symbol muss mindestens das Vordergrundbild, die Größe vom Typ GSize und ein Symbol-Offset zur Positionierung des Symbols definieren.
Die einfachsten Symbole basieren auf dem Typ G_DEFAULT_ICON. Wenn Sie ein Symbol auf der Grundlage dieses Typs erstellen, müssen Sie nur wenige Eigenschaften bearbeiten, um das Standardsymbol zu ändern.
Im untenstehenden Beispiel wird ein Symbol mithilfe des Typs G_DEFAULT_ICON erstellt und dann so verändert, dass es ein anderes Bild verwendet. (Wenn Sie andere Bilder verwenden, achten Sie darauf, dass Sie die richtige Bildgröße entsprechend der Größe des Standardbilds festlegen, damit das Bild korrekt angezeigt wird.)
var map = new GMap2(document.getElementById("map_canvas"));
map.addControl(new GSmallMapControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
// Create our "tiny" marker icon
var blueIcon = new GIcon(G_DEFAULT_ICON);
blueIcon.image = "http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png";
// Set up our GMarkerOptions object
markerOptions = { icon:blueIcon };
// Add 10 markers to the map at random locations
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
map.addControl(new GSmallMapControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
// Create our "tiny" marker icon
var blueIcon = new GIcon(G_DEFAULT_ICON);
blueIcon.image = "http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png";
// Set up our GMarkerOptions object
markerOptions = { icon:blueIcon };
// Add 10 markers to the map at random locations
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
map.addOverlay(new GMarker(point, markerOptions));
}Beispiel anzeigen (icon-simple.html)
Die meisten Symbole enthalten ein Vordergrundbild und ein Schattenbild. Das Schattenbild wird in einem Winkel von 45 Grad (nach oben rechts) zum Vordergrundbild erstellt und seine untere linke Ecke wird an der unteren linken Ecke des Vordergrundbilds ausgerichtet. Als Schattenbilder sollten 24-Bit-PNG-Bilder mit Alpha-Transparenz verwendet werden, damit Bildbegrenzungen korrekt auf der Karte angezeigt werden.
In diesem Beispiel wird ein neuer Symboltyp erstellt, wobei als Beispiel die "kleinen" Markierungen aus Google Ride Finder verwendet werden. Folgendes muss angegeben werden: das Vordergrundbild, das Schattenbild und die Punkte, an denen das Symbol auf der Karte und das Infofenster am Symbol verankert werden. Beachten Sie, dass das Symbol in Optionen übergeben wird, die im GMarkerOptions-Objekt definiert sind.
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
// Create our "tiny" marker icon
var tinyIcon = new GIcon();
tinyIcon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
tinyIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
tinyIcon.iconSize = new GSize(12, 20);
tinyIcon.shadowSize = new GSize(22, 20);
tinyIcon.iconAnchor = new GPoint(6, 20);
tinyIcon.infoWindowAnchor = new GPoint(5, 1);
// Set up our GMarkerOptions object literal
markerOptions = { icon:tinyIcon };
// Add 10 markers to the map at random locations
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
// Create our "tiny" marker icon
var tinyIcon = new GIcon();
tinyIcon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
tinyIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
tinyIcon.iconSize = new GSize(12, 20);
tinyIcon.shadowSize = new GSize(22, 20);
tinyIcon.iconAnchor = new GPoint(6, 20);
tinyIcon.infoWindowAnchor = new GPoint(5, 1);
// Set up our GMarkerOptions object literal
markerOptions = { icon:tinyIcon };
// Add 10 markers to the map at random locations
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
} southWest.lng() + lngSpan * Math.random());
map.addOverlay(new GMarker(point, markerOptions)); Beachten Sie, dass die Definition der GMarkerOptions-Objekte die Nutzung der Objektliteral-Notation zeigt. Das Objekt wird nicht mithilfe eines Konstruktors instanziiert, sondern einfach mithilfe von Name-Wert-Paaren deklariert.
Beispiel anzeigen (icon-complex.html)
Benutzerdefinierte Symbole
zurück zum StartGIcon-Objekte besitzen verschiedene weitere Eigenschaften, die Sie festlegen sollten, um Browserkompatibilität und Funktionalität Ihrer Symbole zu maximieren. Beispielsweise gibt die Eigenschaft imageMap die Form der nichttransparenten Teile des Symbolbilds an. Wenn Sie diese Eigenschaft nicht für Ihr Symbol festlegen, kann das ganze Symbolbild (einschließlich der transparenten Teile) in Firefox/Mozilla angeklickt werden. Weitere Informationen hierzu finden Sie in der GIcon-Klassenreferenz.
Häufig besitzen Ihre Symbole unterschiedliche Vordergründe, aber dieselbe Form und denselben Schatten. Am einfachsten erreichen Sie dies, indem Sie den Konstruktor "Kopie" für die Klasse GIcon verwenden. Dieser kopiert alle Eigenschaften in ein neues Symbol, das Sie dann anpassen können.
var map = new GMap2(document.getElementById("map_canvas"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
// Create a base icon for all of our markers that specifies the
// shadow, icon dimensions, etc.
var baseIcon = new GIcon(G_DEFAULT_ICON);
baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
baseIcon.iconSize = new GSize(20, 34);
baseIcon.shadowSize = new GSize(37, 34);
baseIcon.iconAnchor = new GPoint(9, 34);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
// Creates a marker whose info window displays the letter corresponding
// to the given index.
// Add 10 markers to the map at random locations
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
map.addOverlay(createMarker(point, i));
}
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
// Create a base icon for all of our markers that specifies the
// shadow, icon dimensions, etc.
var baseIcon = new GIcon(G_DEFAULT_ICON);
baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
baseIcon.iconSize = new GSize(20, 34);
baseIcon.shadowSize = new GSize(37, 34);
baseIcon.iconAnchor = new GPoint(9, 34);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
// Creates a marker whose info window displays the letter corresponding
// to the given index.
function createMarker(point, index) {
// Create a lettered icon for this point using our icon class
var letter = String.fromCharCode("A".charCodeAt(0) + index);
var letteredIcon = new GIcon(baseIcon);
letteredIcon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";
// Set up our GMarkerOptions object
markerOptions = { icon:letteredIcon };
var marker = new GMarker(point, markerOptions);
GEvent.addListener(marker, "click", function() {
});
return marker;
}
// Create a lettered icon for this point using our icon class
var letter = String.fromCharCode("A".charCodeAt(0) + index);
var letteredIcon = new GIcon(baseIcon);
letteredIcon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";
// Set up our GMarkerOptions object
markerOptions = { icon:letteredIcon };
var marker = new GMarker(point, markerOptions);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("Marker <b>" + letter + "</b>");
});
return marker;
}
// Add 10 markers to the map at random locations
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
map.addOverlay(createMarker(point, i));
}
Beispiel anzeigen (icon-custom.html)
Markierungs-Manager verwenden
zurück zum StartWenn eine große Anzahl von Markierungen zu einer Google-Karte hinzugefügt wird, kann dies das Rendern der Karte verlangsamen und insbesondere bei bestimmten Zoomstufen zu Unübersichtlichkeit führen. Der Markierungs-Manager bietet eine Lösung für beide Probleme. Er ermöglicht eine effiziente Anzeige von hunderten von Markierungen auf derselben Karte und bietet die Möglichkeit, festzulegen, in welchen Zoomstufen diese angezeigt werden sollen.
Der Markierungs-Manager steht in der GMaps-Dienstprogrammbibliothek zur Verfügung. Diese Bibliothek ist eine Open-Source-Bibliothek. Sie enthält Dienstprogramme, die nicht zum Kern des Google Maps-API gehören. Sie können die in dieser Bibliothek enthaltenen Dienstprogramme hinzufügen, indem Sie die JavaScript-Quelle direkt mit einem <script>-Tag hinzufügen.
<script src="http://gmaps-utility-library.googlecode.com/svn/trunk/markermanager/release/src/markermanager.js">
Das Objekt MarkerManager in der Bibliothek markermanager.js lagert die Verwaltung der im Dienstprogramm registrierten Markierungen aus. Es verfolgt, welche Markierungen bei bestimmten Zoomstufen in der aktuellen Ansicht sichtbar sind und übergibt nur diese Markierungen zu Zeichenzwecken an die Karte. Der Manager überwacht den aktuellen Darstellungsbereich und die aktuelle Zoomstufe der Karte und fügt dynamisch Markierungen zur Karte hinzu bzw. entfernt diese, wenn sie aktiv werden. Zusätzlich können Entwickler das Markierungs-Clustering implementieren, indem zugelassen wird, dass die Markierungen die Zoomstufen festlegen, bei denen sie angezeigt werden. Durch diese Art der Verwaltung können kann das Rendern von Karten beschleunigt und unübersichtliche Darstellungen verringert werden.
Wenn Sie einen Markierungs-Manager verwenden möchten, erstellen Sie ein MarkerManager-Objekt. Übergeben Sie im einfachsten Fall lediglich eine Karte an das Objekt.
var map = new GMap2(document.getElementById("map_canvas"));
var mgr = new MarkerManager(map);
var mgr = new MarkerManager(map);
Sie können außerdem verschiedene Optionen angeben, mit denen eine Feinabstimmung des Verhaltens des Markierungs-Managers möglich ist. Diese Optionen werden über ein MarkerManagerOptions-Objekt übergeben, das die folgenden Felder enthält:
• maxZoom: Gibt die höchste Zoomstufe an, die von diesem Markierungs-Manager überwacht wird. Der Standardwert ist die höchste von Google Maps unterstützte Zoomstufe.
• borderPadding: Gibt den zusätzlichen Abstand in Pixeln an, der vom Manager außerhalb des aktuellen Darstellungsbereichs überwacht wird. Dies ermöglicht die Anzeige von Markierungen auf der Karte, die sich unmittelbar außerhalb des Darstellungsbereichs befinden, was das Verschieben über kleine Bereiche verbessert. Der Standardwert ist 100.
• trackMarkers: Gibt an, ob Verschiebungen von Markierungen vom Markierungs-Manager verfolgt werden sollen. Wenn Sie verwaltete Markierungen wünschen, die ihre Position mit der Methode setPoint() ändern, setzen Sie diesen Wert auf true. Dieses Flag ist standardmäßig auf false gesetzt. Beachten Sie, dass Markierungen sowohl an ihrer ursprünglichen Position als auch an der bzw. den neuen Positionen angezeigt werden, wenn dieser Wert beim Verschieben auf false gesetzt ist.
Das MarkerManagerOptions-Objekt ist ein Objektliteral, daher deklarieren Sie das Objekt einfach ohne Konstruktor:
var map = new GMap2(document.getElementById("map_canvas"));
var mgrOptions = { borderPadding: 50, maxZoom: 15, trackMarkers: true };
var mgr = new MarkerManager(map, mgrOptions);
var mgrOptions = { borderPadding: 50, maxZoom: 15, trackMarkers: true };
var mgr = new MarkerManager(map, mgrOptions);
Nachdem Sie einen Manager erstellt haben, können Sie Markierungen hinzufügen. MarkerManager unterstützt das Hinzufügen einer Markierung mit der Methode addMarker() sowie das Hinzufügen einer Sammlung, die als Array übergeben wird, mit der Methode addMarkers(). Einzelne Markierungen, die mithilfe von addMarker() hinzugefügt werden, werden unmittelbar auf der Karte angezeigt, sofern sie innerhalb der aktuellen Ansicht und der angegebenen Beschränkungen für die Zoomstufe liegen.
Das gleichzeitige Hinzufügen mehrerer Markierungen mithilfe von addMarkers() wird aufgrund seiner Effizienz empfohlen. Markierungen, die mithilfe der Methode addMarkers() hinzugefügt werden, werden erst dann auf der Karte angezeigt, wenn Sie explizit die Methode refresh() von MarkerManager aufrufen. Diese fügt alle Markierungen innerhalb des aktuellen Darstellungsbereichs und des festgelegten Abstandsbereichs zu der Karte hinzu. Nach dieser ersten Darstellung übernimmt MarkerManager alle visuellen Aktualisierungen, indem die "moveend"-Ereignisse der Karte überwacht werden.
Beispiel für die Zoomstufe: Wetterkarte
Das folgende Beispiel erstellt eine Wetterkarte für Europa. Bei Zoomstufe 3 werden 20 willkürlich angeordnete Wettersymbole angezeigt. Bei Stufe 6, wenn alle 200 Städte mit einer Größe über 300.000 Einwohnern leicht zu erkennen sind, werden 200 zusätzliche Markierungen angezeigt. Bei Stufe 8 werden schließlich 1.000 Markierungen angezeigt. (Hinweis: Zur Vereinfachung des Beispiels werden Markierungen an zufällig ausgewählten Positionen hinzugefügt.)
function setupMap() {
function getWeatherMarkers(n) {
function setupWeatherMarkers() {
if (GBrowserIsCompatible()) {
} map = new GMap2(document.getElementById("map_canvas"));
map.addControl(new GLargeMapControl());
map.setCenter(new GLatLng(41, -98), 4);
window.setTimeout(setupWeatherMarkers, 0);
}map.addControl(new GLargeMapControl());
map.setCenter(new GLatLng(41, -98), 4);
window.setTimeout(setupWeatherMarkers, 0);
function getWeatherMarkers(n) {
var batch = [];
for (var i = 0; i < n; ++i) {
return batch;
} for (var i = 0; i < n; ++i) {
batch.push(new GMarker(getRandomPoint(), { icon: getWeatherIcon() }));
} return batch;
function setupWeatherMarkers() {
mgr = new MarkerManager(map);
mgr.addMarkers(getWeatherMarkers(20), 3);
mgr.addMarkers(getWeatherMarkers(200), 6);
mgr.addMarkers(getWeatherMarkers(1000), 8);
mgr.refresh();
}mgr.addMarkers(getWeatherMarkers(20), 3);
mgr.addMarkers(getWeatherMarkers(200), 6);
mgr.addMarkers(getWeatherMarkers(1000), 8);
mgr.refresh();
Beispiel anzeigen (weather_map.html)
Beispiel für Clustering: Google-Niederlassungen
Der Markierungs-Manager kann auch ein einfaches Clustering von Markierungen ausführen. Dies erfolgt nicht automatisch, Sie können den gewünschten Effekt jedoch erzielen, indem Sie die niedrigste und die höchste Zoomstufe festlegen, bei der eine bestimmte Markierung angezeigt wird. In diesem Beispiel wird eine Karte von Google-Niederlassungen in Nordamerika erstellt. Auf der höchsten Stufe werden die Flaggen der Länder angezeigt, in denen sich die Niederlassungen befinden. Auf den Zoomstufen 3 bis 7 werden Symbole über Bevölkerungszentren angezeigt, in denen sich mindestens eine Niederlassung befindet. Ab Stufe 8 werden schließlich einzelne Markierungen für jede Niederlassung angezeigt.
var officeLayer = [
function setupOfficeMarkers() {
{
...
}; "zoom": [0, 3],
"places": [
}, "places": [
{ "name": "US Offices", "icon": ["us",
"flag-shadow"], "posn": [40, -97] },
{ "name": "Canadian Offices", "icon": ["ca", "flag-shadow"], "posn": [58, -101] }
]
{ "name": "Canadian Offices", "icon": ["ca", "flag-shadow"], "posn": [58, -101] }
...
function setupOfficeMarkers() {
var mgr = new MarkerManager(map);
for (var i in officeLayer) {
mgr.refresh();
}for (var i in officeLayer) {
var layer = officeLayer[i];
var markers = [];
for (var j in layer["places"]) {
mgr.addMarkers(markers, layer["zoom"][0], layer["zoom"][1]);
} var markers = [];
for (var j in layer["places"]) {
var place = layer["places"][j];
var icon = getIcon(place["icon"]);
var posn = new GLatLng(place["posn"][0], place["posn"][1]);
markers.push(new GMarker(posn, { title: place["name"], icon: icon }));
} var icon = getIcon(place["icon"]);
var posn = new GLatLng(place["posn"][0], place["posn"][1]);
markers.push(new GMarker(posn, { title: place["name"], icon: icon }));
mgr.addMarkers(markers, layer["zoom"][0], layer["zoom"][1]);
mgr.refresh();
Beispiel anzeigen (google_northamerica_offices.html)
Weitere Informationen finden Sie in der Referenzdokumentation für den Open-Source-Markierungs-Manager.
Polylinien
zurück zum StartGPolyline-Objekte erstellen auf der Karte ein lineares Overlay. Ein GPolyline-Objekt besteht aus einer Reihe von Punkten und erstellt mehrere Liniensegmente, die diese Punkte in einer geordneten Abfolge verbinden.
Polylinien zeichnen
zurück zum StartPolylinien werden auf der Karte als eine Reihe von geraden Segmenten gezeichnet. Sie können benutzerdefinierte Farben, die Stärke und die Opazität für die Linie angeben. Farben müssen im hexadezimal-numerischen HTML-Stil angegeben werden; verwenden Sie also z. B. #ff0000 anstelle von red. GPolyline kann keine Farbbenennungen verarbeiten.
GPolyline-Objekte verwenden die Vektor-Zeichenfunktionen des Browsers, sofern diese zur Verfügung stehen. Im Internet Explorer verwendet Google Maps zum Zeichnen von Polylinien VML (siehe XHTML und VML), in anderen Browsern wird SVG verwendet, sofern verfügbar. In allen anderen Fällen wird ein Bild der Linie von den Google-Servern angefordert und über die Karte gelegt. Dieses wird nach Bedarf aktualisiert, während die Karte gezoomt und gezogen wird.
Der folgende Code-Ausschnitt erstellt eine 10 Pixel breite, rote Polylinie zwischen zwei Punkten:
var polyline = new GPolyline([
new GLatLng(37.4419, -122.1419),
new GLatLng(37.4519, -122.1519)
], "#ff0000", 10);
map.addOverlay(polyline);
new GLatLng(37.4419, -122.1419),
new GLatLng(37.4519, -122.1519)
], "#ff0000", 10);
map.addOverlay(polyline);
Beispiel anzeigen (polyline-simple.html)
Geodätische Polylinien
zurück zum StartDie auf der Karte dargestellten Polylinien sind der aktuellen Projektion entsprechende, gerade Linien. Sie erscheinen zumindest auf der Karte als gerade Linien, berücksichtigen jedoch möglicherweise die Krümmung der Erde nicht ausreichend. Wenn Sie stattdessen eine Geodäte zeichnen möchten (ein Segment eines Großkreises, das die kürzeste Verbindung zwischen zwei Punkten auf der Erdoberfläche darstellt), müssen Sie geodesic:true im Argument GPolylineOptions von GPolyline übergeben.
Das Objekt GPolylineOptions ist ein Beispiel für ein Objektliteral. Wenn Objektliterale verwendet werden, wird kein Objekt konstruiert. Stattdessen werden die Argumente als Reihe von Name/Wert-Paaren in geschweiften Klammern übergeben. Objektliterale werden oftmals dann verwendet, wenn das Instanziieren eines Objekts unnötig ist.
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(45.828799,-105.292969), 2);
// Create GPolylineOptions argument as an object literal.
// Note that we don't use a constructor.
var polyOptions = {geodesic:true};
var polyline = new GPolyline([
map.setCenter(new GLatLng(45.828799,-105.292969), 2);
// Create GPolylineOptions argument as an object literal.
// Note that we don't use a constructor.
var polyOptions = {geodesic:true};
var polyline = new GPolyline([
new GLatLng(40.65642, -73.7883),
new GLatLng(61.1699849, -149.944496)
], "#ff0000", 10, 1, polyOptions);
map.addOverlay(polyline);
new GLatLng(61.1699849, -149.944496)
], "#ff0000", 10, 1, polyOptions);
map.addOverlay(polyline);
Beispiel anzeigen (polyline-geodesic.html)
Kodierte Polylinien
zurück zum StartDas GPolyline-Objekt in einer Google-Karte stellt eine Linie als Reihe von Punkten dar, wodurch diese einfach zu verwenden, aber nicht unbedingt kompakt ist. Lange, komplizierte Linien erfordern eine große Menge an Arbeitsspeicher und es dauert oft länger, sie zu zeichnen. Außerdem werden die einzelnen Segmente innerhalb einer nicht kodierten Polylinie ungeachtet ihrer Auflösung bei höheren Zoomstufen auf der Karte gezeichnet.
Das Google Maps-API ermöglicht Ihnen die Darstellung von Pfaden mithilfe kodierter Polylinien, die mithilfe eines komprimierten Formats von ASCII-Zeichen eine Reihe von Punkten innerhalb einer GPolyline angeben. Die kodierte Polylinie ermöglicht Ihnen auch, Gruppen von Zoomstufen festzulegen, die beim Zeichnen von Liniensegmenten ignoriert werden sollen. Dadurch können Sie angeben, wie detailliert eine Polylinie bei einer bestimmten Zoomstufe angezeigt werden soll. Obwohl das Einrichten von kodierten Polylinien schwieriger ist, können sie die Effizienz beim Zeichnen von Overlays bedeutend steigern.
Beispielsweise wird eine GPolyline aus 3 Punkten (2 Liniensegmenten) normalerweise wie folgt dargestellt:
var polyline = new GPolyline([
map.addOverlay(polyline);
new GLatLng(37.4419, -122.1419),
new GLatLng(37.4519, -122.1519),
new GLatLng( 37.4619, -122.1819)
], "#FF0000", 10); new GLatLng(37.4519, -122.1519),
new GLatLng( 37.4619, -122.1819)
map.addOverlay(polyline);
Dies ist der Code für eine kodierte GPolyline aus denselben Punkten (die Feinheiten des Kodierungsalgorithmus spielen an dieser Stelle noch keine Rolle).
var encodedPolyline = new GPolyline.fromEncoded({
color: "#FF0000",
weight: 10,
points: "yzocFzynhVq}@n}@o}@nzD",
levels: "BBB",
zoomFactor: 32,
numLevels: 4
});
map.addOverlay(encodedPolyline);
color: "#FF0000",
weight: 10,
points: "yzocFzynhVq}@n}@o}@nzD",
levels: "BBB",
zoomFactor: 32,
numLevels: 4
});
map.addOverlay(encodedPolyline);
An diesem Code gibt es zwei Aspekte zu beachten.
1.Zunächst einmal wird die Reihe von Punkten in der kodierten Polylinie als eine Reihe von ASCII-Zeichen dargestellt, während in der grundlegenden GPolyline die gewohnten Längen- und Breitenangaben verwendet werden. Der Algorithmus zum Erstellen dieser Punkte als Reihe von kodierten ASCII-Werten ist hier dokumentiert. Dieser Algorithmus wird benötigt, wenn Sie beispielsweise kodierte Polylinien schnell über einen Serverprozess berechnen möchten. Wenn Sie jedoch nur vorhandene Punkte anhand der Breiten- und Längenangabe konvertieren möchten, können Sie unser interaktives Dienstprogramm verwenden.
2.Außerdem ermöglicht Ihnen die kodierte Polylinie auch, die höchste Zoomstufe für das Zeichnen der einzelnen Liniensegmente auf einer Google-Karte anzugeben. Wenn ein Punkt auf einer höheren Zoomstufe nicht angezeigt wird, wird der Pfad einfach vom vorherigen anzeigbaren Punkt zum nächsten anzeigbaren Punkt gezogen. Beachten Sie, dass diese Funktion in einer nicht kodierten GPolyline nicht verfügbar ist und dass sie besonders nützlich ist, um eine schnelle Darstellung bei hohen Zoomstufen zu ermöglichen, wo die Einzelheiten mancher Liniensegmente möglicherweise nicht relevant sind. Beispielsweise sind bei einer kodierten Polylinie, die eine Fahrt von New York City nach Chicago darstellt, die Liniensegmente, die für bestimmte Straßen in Manhattan stehen, nicht von Bedeutung, wenn die Karte auf die Bundesstaatenebene herausgezoomt wird.
Beispiel anzeigen (polyline-encoding.html)
Interaktives Dienstprogramm für kodierte Polylinien
Informationen zum zugrunde liegenden Algorithmus für kodierte Polylinien finden Sie unter Polylinien-Algorithmus.
Polygone
zurück zum StartGPolygon-Objekte gleichen GPolyline-Objekten insofern, als dass sie aus einer Reihe von Punkten in einer geordneten Abfolge bestehen. Polygone sind jedoch keine offenen Linien, sondern geschlossene Formen, die Bereiche definieren. Genau wie bei Polylinien können Sie benutzerdefinierte Farben, die Stärke und die Opazität für die Kante des Polygons (die "Linie") definieren, sowie benutzerdefinierte Farben und die Opazität für den Füllbereich innerhalb des umschlossenen Bereichs. Farben müssen im hexadezimal-numerischen HTML-Stil angegeben werden.
GPolygon-Objekte verwenden genau wie GPolyline-Objekte die Vektor-Zeichenfunktionen des Browsers, sofern diese zur Verfügung stehen.
Der folgende Code-Ausschnitt erstellt eine 10 Pixel breite Box um vier Punkte herum. Beachten Sie, dass dieses Polygon geschlossen wird, indem der Segmentpfad zu seinem Ursprungspunkt zurückgeführt wird. Sie sollten Polygone immer schließen, um ein undefiniertes Verhalten zu vermeiden.
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.addControl(new GSmallMapControl());
GEvent.addListener(map, 'click', function(overlay, latlng) {
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.addControl(new GSmallMapControl());
GEvent.addListener(map, 'click', function(overlay, latlng) {
var lat = latlng.lat();
var lon = latlng.lng();
var latOffset = 0.01;
var lonOffset = 0.01;
var polygon = new GPolygon([
map.addOverlay(polygon);
});var lon = latlng.lng();
var latOffset = 0.01;
var lonOffset = 0.01;
var polygon = new GPolygon([
new GLatLng(lat, lon - lonOffset),
new GLatLng(lat + latOffset, lon),
new GLatLng(lat, lon + lonOffset),
new GLatLng(lat - latOffset, lon),
new GLatLng(lat, lon - lonOffset)
], "#f33f00", 5, 1, "#ff0000", 0.2); new GLatLng(lat + latOffset, lon),
new GLatLng(lat, lon + lonOffset),
new GLatLng(lat - latOffset, lon),
new GLatLng(lat, lon - lonOffset)
map.addOverlay(polygon);
Beispiel anzeigen (polygon-simple.html)
Boden-Overlays
zurück zum StartPolygone sind als Overlays für willkürlich geformte Bereiche geeignet, sie können jedoch keine Bilder anzeigen. Wenn Sie ein Bild auf einer Karte platzieren möchten, können Sie dazu ein GGroundOverlay-Objekt verwenden. Der Konstruktor für ein GGroundOverlay-Objekt verwendet die URL eines Bilds und den GLatLngBounds-Wert des Bilds als Parameter.
Das folgende Beispiel legt eine historische Karte von Newark, New Jersey, als Overlay über die Karte:
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(40.740, -74.18), 12);
// ground overlay
var boundaries = new GLatLngBounds(new GLatLng(40.716216,-74.213393), new GLatLng(40.765641,-74.139235));
var oldmap = new GGroundOverlay("http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg", boundaries);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.addOverlay(oldmap);
map.setCenter(new GLatLng(40.740, -74.18), 12);
// ground overlay
var boundaries = new GLatLngBounds(new GLatLng(40.716216,-74.213393), new GLatLng(40.765641,-74.139235));
var oldmap = new GGroundOverlay("http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg", boundaries);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.addOverlay(oldmap);
Beispiel anzeigen (groundoverlay-simple.html)
Kachel-Overlays
zurück zum StartDie Karte im Google Maps-API besteht auf jeder Zoomstufe aus einer Reihe von Kacheln, die die gesamte Erdoberfläche abdecken. Es existieren Kacheln für jeden verwendeten Kartentyp: G_NORMAL_MAP, G_SATELLITE_MAP, G_HYBRID_MAP, and G_PHYSICAL_MAP. Kacheln decken nicht alle Regionen in allen Zoomstufen ab. Beispielsweise werden viele Bereiche des Pazifik bei hohen Zoomstufen nicht angezeigt.
Auf der niedrigsten Zoomstufe (Stufe 0) stellt eine Kachel die gesamte Erde dar:
Jede nächsthöhere Zoomstufe unterteilt die Karte in 4 N Kacheln, wobei N sich auf die Zoomstufe bezieht. Beispielsweise unterteilt Google Maps die Welt auf Zoomstufe 1 in ein 2x2-Raster, sodass insgesamt 4 Kacheln entstehen; bei Zoomstufe 2 wird die Welt in ein 4x4-Raster unterteilt, sodass insgesamt 16 Kacheln entstehen, usw.
Wenn Sie die Anzeige dieser Kacheln ändern möchten, stehen Ihnen zwei Optionen zur Verfügung:
• Implementieren Sie ein eigenes Kachel-Overlay auf vorhandenen Kartentypen mithilfe von GTileLayerOverlay
• Implementieren Sie einen eigenen benutzerdefinierten Kartentyp mithilfe von GMapType
Die erste Option ist deutlich einfacher, jedoch bietet ihre Verwendung weniger Möglichkeiten, während die zweite Option Ihnen einen größeren Einfluss auf die Anzeige in Ihrer Anwendung ermöglicht. Beide Fälle werden nachfolgend erläutert, jedoch deckt diese Dokumentation nicht die vollständige Implementierung benutzerdefinierter Kartentypen ab.
Für beide Optionen müssen Sie drei abstrakte Methoden aus dem GTileOverlay-Interface implementieren:
• getTileUrl() gibt eine URL an die Karte zurück, die das Kachelbild mit einem übergebenen GPoint und einer Zoomstufe enthält.
• isPng() gibt einen Boolean-Wert an die Karte zurück, der angibt, ob das Bild eine PNG-Datei ist (diese kann transparent angezeigt werden). Wenn der Wert true lautet, wird das Bild als PNG-Datei interpretiert.
• getOpacity() gibt einen Wert zwischen 0,0 und 1,0 zurück, der die Opazitätsstufe für die Anzeige dieses Bilds angibt.
Die unterschiedlichen Vorgehensweisen werden in den nächsten beiden Abschnitten erläutert.
Kachelebenen-Overlays
zurück zum StartWenn Sie möchten, dass ein Overlay auf einem vorhandenen Kartentyp angezeigt wird, verwenden Sie dazu das GTileLayerOverlay-Objekt. Dieses Objekt erfordert, dass Sie ein GCopyrightCollection erstellen und der Kachelebene zuordnen, um die Nutzungsberechtigung für das Bild bzw. die Bilder anzugeben.
Der folgende Code zeigt ein einfaches, transparentes Overlay auf allen Kacheln bei allen Zoomstufen an, das den Umriss der Kacheln zwischen unverankerten Fadenkreuzen angibt.
// Set up the copyright information
// Each image used should indicate its copyright permissions
var myCopyright = new GCopyrightCollection("© ");
myCopyright.addCopyright(new GCopyright('Demo',
// Create the tile layer overlay and
// implement the three abstract methods
var tilelayer = new GTileLayer(myCopyright);
tilelayer.getTileUrl = function() { return "../include/tile_crosshairs.png"; };
tilelayer.isPng = function() { return true;};
tilelayer.getOpacity = function() { return 1.0; }
var myTileLayer = new GTileLayerOverlay(tilelayer);
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.addOverlay(myTileLayer);
// Each image used should indicate its copyright permissions
var myCopyright = new GCopyrightCollection("© ");
myCopyright.addCopyright(new GCopyright('Demo',
new GLatLngBounds(new GLatLng(-90,-180), new GLatLng(90,180)),
0,'©2007 Google'));
0,'©2007 Google'));
// Create the tile layer overlay and
// implement the three abstract methods
var tilelayer = new GTileLayer(myCopyright);
tilelayer.getTileUrl = function() { return "../include/tile_crosshairs.png"; };
tilelayer.isPng = function() { return true;};
tilelayer.getOpacity = function() { return 1.0; }
var myTileLayer = new GTileLayerOverlay(tilelayer);
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.addOverlay(myTileLayer);
Beispiel anzeigen (tileoverlay-simple.html)
Benutzerdefinierte Kartentypen
zurück zum StartHinweis: Dies ist ein Thema für fortgeschrittene Nutzer
Wenn Ihnen die Möglichkeiten von GTileLayerOverlay nicht ausreichen, können Sie einen eigenen, benutzerdefinierten Kartentyp definieren und ein ganz neues Anzeigeparadigma entwickeln. Konstruieren Sie dazu ein GMapType-Objekt und fügen Sie es mithilfe der Methode GMap2.addMapType() zur Karte hinzu.
Einen Kartentyp von Grund auf neu zu konstruieren ist ein aufwändiger Prozess. Sie müssen dabei eine Möglichkeit zum Definieren und Abrufen dynamischer Daten schaffen, die mit aktuellen Koordinaten auf der Karte angezeigt werden, und Sie müssen selbst festlegen, wie Kachelbilder referenziert und angezeigt werden sollen. Wie Sie dies bewerkstelligen, bleibt Ihnen überlassen; wir können Ihnen jedoch mit Informationen zur Implementierung von Kachelreferenzen in Google Maps behilflich sein.
Google Maps-Koordinaten
zurück zum StartDas Google Maps-API verwendet drei Koordinatensysteme:
• Pixelkoordinaten, die einen Punkt auf einer Bildkachel referenzieren
• Kachelkoordinaten, die eine Kachel innerhalb einer Kachelebene referenzieren
• Die Zoomebene, die die Gesamtanzahl an Kacheln definiert
Die einzelnen Systeme werden nachfolgend erläutert.
Pixelkoordinaten
Jede Kachel in Google Maps besteht aus 256 x 256 Pixeln. Ein Punkt auf einer bestimmten Kachel kann deshalb mit einem GPoint x,y-Paar referenziert werden. Der Ursprung (0,0) für jede Kachel befindet sich an der nordwestlichen Ecke der Kachel. Deshalb befindet sich der Ursprung der einzelnen Kachel, die für die gesamte Erde steht, am Nordpol und bei -180 Grad Länge, also bei Alaska. x-Werte (Länge) erhöhen sich in Richtung Osten und y-Werte (Breite) in Richtung Süden, bis zum südöstlichen Punkt (255,255).
Bei höheren Zoomstufen vergrößert sich der Pixelbereich durch eine Verdopplung in x- und y-Richtung. Beispielsweise besteht die Karte bei Zoomstufe 1 aus 4 Kacheln mit je 256 x 256 Pixeln, d. h. der Pixelbereich besteht aus 512 x 512 Pixeln. Bei Zoomstufe 19 kann jedes x- und y-Pixel auf der Karte mit einem Wert zwischen 0 und 256 * 219 referenziert werden.
Kachelkoordinaten
Es ist häufig nicht zweckmäßig, nur einen solchen Punkt auf der gesamten Karte zu referenzieren. Bei höheren Zoomstufen kann das Google Maps-API nicht eine einzige Bildkachel zur Anzeige der gesamten Erde verwenden. Daher ist es sinnvoll, zu bestimmen, welche Bildkachel verwendet wird, und dann die Pixelkoordinaten relativ zum Ursprung der Kachel zu berechnen. Alle von Ihnen implementierten benutzerdefinierten Karten müssen dieselbe Auswertung vornehmen.
Kacheln werden in Google Maps vom selben Ursprung ausgehend nummeriert wie Pixel, d. h., die Ursprungskachel befindet sich immer in der nordwestlichen Ecke der Karte. Kacheln werden mithilfe von x,y-Koordinaten aus diesem Ursprung indiziert. Beispielsweise kann bei Zoomstufe 2, wenn die Erde in 16 Kacheln unterteilt ist, jede Kachel durch ein eindeutiges x,y-Paar referenziert werden.
Bei der Indizierung eines bestimmten Punkts auf einer bestimmten Zoomstufe können daher zwei GPoint-Werte verwendet werden: einer zur Referenzierung der verwendeten Kachel und einer zur Referenzierung der Pixelkoordinate innerhalb der Kachel auf dem jeweiligen 256 x 256-Pixel-Bild.
Das Implementieren eines Kachel-Overlays für mehr als nur ein paar einfache Zoomstufen kann mühsam sein, da Sie Logik hinzufügen müssten, um zu bestimmen, welches Kachelbild bereitgestellt werden soll. Das Google Maps-API ermöglicht Ihnen die Konstruktion eines GTileLayer, wobei ein GTileLayerOptions-Argument als Objektliteral übergeben wird. Das Argument GTileLayerOptions enthält die Eigenschaft tileUrlTemplate, die ausgehend von Kachelkoordinaten Kachelanfragen bestimmten URLs zuordnet. Der Konstruktor für ein Overlay lautet in etwa wie folgt:
var tileLayerOverlay = new GTileLayerOverlay(
map.addOverlay(tlo);
new GTileLayer(null, null, null, {
); tileUrlTemplate: 'http://domain.com/myimage_{Z}_{X}_{Y}.png',
isPng:true,
opacity:1.0
})
isPng:true,
opacity:1.0
map.addOverlay(tlo);
Mit diesem Vorlagenschema können Sie eine Sammlung von Kachelbildern ansprechen, die mithilfe von Kachelkoordinaten benannt wurden, wie dies auch innerhalb von Google Maps der Fall ist.
Handhabung von Urheberrechtsinformationen
Für Karten wird in der Regel Bildmaterial verwendet, das von externen Quellen gekauft, erzeugt oder lizenziert wurde. Häufig ist dabei die Anzeige von Urheberrechtsinformationen erforderlich und in bestimmten Fällen (beispielsweise bei Satellitendaten) stammt das Bildmaterial für verschiedene Positionen auf der Karte möglicherweise von unterschiedlichen Quellen. Damit Sie die Möglichkeit haben, auf Ihren benutzerdefinierten Kartentypen dynamische Copyright-Informationen anzuzeigen, bietet das Maps-API eine Reihe von Objekten, die Copyright-Informationen enthalten können, sowie Methoden und Interfaces zur Implementierung der Abrufe dieser Copyright-Informationen basierend auf dem aktuellen Darstellungsbereich und der aktuellen Zoomstufe.
Urheberrechtsobjekte
zurück zum StartDas Objekt GCopyright ist ein einfaches Objekt, das grundlegende Copyright-Information enthält. Die Eigenschaften minZoom und bounds dieses Objekts definieren die Beschränkungen, unter denen diese Urheberrechtsinformationen gelten, wobei text den Urheberrechtsstring enthält, der angezeigt wird, wenn diese Bedingungen erfüllt werden.
Mehrere GCopyright-Objekte werden in einer GCopyrightCollection zusammengefasst. Mit dem GCopyrightCollection-Konstruktor können Sie ein Textpräfix (z. B. "Imagery © 2007") definieren, das an alle Urheberrechtshinweise angehängt wird. Beachten Sie, dass Sie Urheberrechtsvermerke nicht direkt innerhalb des Konstruktors zu GCopyrightCollection hinzufügen können. Sie müssen die Methode addCopyright aufrufen, um einzelne GCopyright-Objekte zu der Sammlung hinzuzufügen, nachdem sie konstruiert wurde.
Die GTileLayer-Schnittstelle erfordert ein copyrights-Argument in ihrem Konstruktor. Klassen, die diese Kachelebenen behandeln (z. B. GTileLayerOverlay und GMapType), müssen zuvor ein GCopyrightCollection-Objekt erstellen und dieses dem Konstruktor der Kachelebene übergeben.
Das Google Maps-API implementiert die folgenden Methoden zur Anzeige von Copyright-Informationen. Sie können diese überschreiben, um ein benutzerdefiniertes Verhalten zu erreichen.
• GMapType.getCopyrights() ruft GTileLayer.getCopyright() für alle untergeordneten Kachel-Layer auf.
• Jedes GTileLayer.getCopyright()-Objekt ruft GCopyrightCollection.getCopyrightNotice() für seine Urheberrechtssammlung auf.
• GCopyrightCollection.getCopyrightNotice() gibt die mit diesem Objekt verbundenen Urheberrechtshinweise zurück und prüft dabei, ob die Angaben für bounds und zoom für alle seine untergeordneten GCopyright Objekte gelten.
Jede dieser Methoden enthält bounds- und zoom-Parameter, die Sie überschreiben und überprüfen können, um zu entscheiden, welche Copyright-Informationen angezeigt werden sollen.
Wenn das Google Maps-API eine Kachelebene in einem Kartentyp anzeigt, ruft es standardmäßig die aktuellen Urheberrechtshinweise mit der Methode GTileLayer.getCopyright() ab. Einige Kartentypen umfassen möglicherweise mehrere Kachelebenen, was bedeuten kann, dass Informationen aus mehreren GCopyrightCollection-Objekten gleichzeitig angezeigt werden müssen. (Beispielsweise implementiert der Kartentyp G_HYBRID_MAP eine Satellitenebene und eine Kartenebene.) Diese Informationen werden angezeigt, indem Urheberrechtshinweise aus mehreren Copyright-Sammlungen miteinander verkettet werden.
Projektionskoordinaten konvertieren
zurück zum StartDie Erde ist eine Kugel, während es sich bei einer Karte um ein flaches, zweidimensionales Objekt handelt. Die Karte, die Sie im Google Maps-API sehen, ist eine Projektion dieser Kugel auf eine flache Oberfläche. Projektionen werden im Google Maps-API mithilfe des GProjection-Interface implementiert. Derzeit wird im Google Maps-API nur eine Projektion implementiert: GMercatorProjection. Vereinfacht ausgedrückt kann eine Projektion als 1-zu-1-Übereinstimmung von GLatLng-Werten in Koordinaten auf der Karte definiert werden und die GProjection-Schnittstelle bietet Konvertierungsdienstprogramme für diesen Zweck.
Die Methode GProjection.fromLatLngToPixel() konvertiert einen GLatLng-Wert in eine Pixelkoordinate auf der angegebenen Zoomstufe. Die Methode GProjection.fromPixelToLatLng() konvertiert wiederum eine Pixelkoordinate auf einer bestimmten Zoomstufe in einen GLatLng-Wert. Diese Methoden sind bei der Implementierung eines Kartentyps hilfreich, weil sie Ihnen ermöglichen, festzulegen, welche Kacheln angezeigt werden sollen sowie auf welche Weise und mit welchem Abstand sie angezeigt werden sollen.
Im folgenden Beispiel werden Klickereignisse behandelt, indem die Pixelkoordinaten auf der aktuellen Zoomstufe berechnet werden, und es werden die Pixelkoordinaten und die Kachelkoordinaten für die entsprechende Position zurückgegeben:
Beispiel anzeigen (tile-detector.html)
Weitere Informationen zur Implementierung von Kartentypen finden Sie in der GMapType-Referenz.
Ebenen
zurück zum StartGLayer-Objekte sind Overlay-Objekte die geografische Informationen von Drittanbietern speichern. Ebenen sind geografisch verknüpfte Features die eine gemeinsame Funktion teilen und auf der Karte als Gruppe angezeigt werden. Google stellt diese aus anderen Quellen stammenden Datensätze zur Verfügung und bündelt sie in einer einzigen Ebene.
Ebenen bestehen in der Regel aus verschiedenen Elementen, meistens Markierungen, Polylinien und Polygonen, die jedoch nicht als separate Objekte angesehen werden. Die Ebene selbst (und alle ihre Komponenten) wird als einzelnes Overlay des Maps-API betrachtet und wird der Karte mit der Standardmethode addOverlay() hinzugefügt. Die Ebene kann auch interaktiv sein, sodass beispielsweise Aktionen auf Komponenten ermöglicht werden, die Infofenster aufrufen.
Jede Ebene enthält eine eindeutige Namespace-ID, sodass sie einfach referenziert und eindeutig angesprochen werden kann. Diese Namespace-ID ist derzeit auf der Domäne der Quellebene basiert. Die englische Ebene Geotagged Wikipedia © Articles hat beispielsweise die Namespace-ID "org.wikipedia.en".
Das Google Maps-API kann derzeit auf diese öffentlich zugänglichen Ebenen zugreifen. Neue Ebenen werden dem Maps-API in regelmäßigen Abständen hinzugefügt. Wir aktualisieren diese Liste in dieser Tabelle.
Der folgende Code-Ausschnitt fügt eine englische Wikipedia-Ebene zu Greenwich Village, New York City hinzu:
function initialize() {
if (GBrowserIsCompatible()) {
} var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(40.730885,-73.997383), 15);
var myLayer = new GLayer("org.wikipedia.en");
map.addOverlay(myLayer);
}
map.setCenter(new GLatLng(40.730885,-73.997383), 15);
var myLayer = new GLayer("org.wikipedia.en");
map.addOverlay(myLayer);
Beispiel anzeigen (layer-simple.html)
Benutzerdefinierte Overlays
Das Google Maps-API ermöglicht Ihnen auch die Erstellung benutzerdefinierter Overlay-Objekte durch die Implementierung des GOverlay-Interface. Das Google Maps-API bietet verschiedene Services, wie GTrafficOverlay-,GGeoXml- und GStreetviewPanorama-Objekte, über eine Implementierung der GOverlay-Schnittstelle. Diese Services sind im Abschnitt Services dokumentiert.
Für das GOverlay-Interface ist die Implementierung von vier abstrakten Methoden erforderlich:
• initialize() aufgerufen als Reaktion auf GMap2.addOverlay()
• remove() aufgerufen als Reaktion auf GMap2.removeOverlay()
• copy(), um die Verwendung von Vorlagen für das neue Overlay zu ermöglichen
• redraw() aufgerufen als Reaktion auf eine Anzeigeänderung innerhalb der Karte
Google Maps-API-Interfaces werden in JavaScript über die Zuweisung der Eigenschaft prototype zu einer Instanz des vererbten Objekts implementiert. Beispielsweise erbt ein Rectangle-Objekt aus dem GOverlay-Interface mithilfe des folgenden Codes:
OverlaySubclass.prototype = new GOverlay();
Die Implementierung der abstrakten Methoden im GOverlay-Interface wird durch die Zuweisung dieser Methoden auf dem prototype des Objekts ermöglicht:
OverlaySubclass.prototype.initialize = myInitializeMethod;
OverlaySubclass.prototype.remove = myRemoveMethod;
OverlaySubclass.prototype.copy = myCopyMethod;
OverlaySubclass.prototype.redraw = myRedrawMethod;
OverlaySubclass.prototype.remove = myRemoveMethod;
OverlaySubclass.prototype.copy = myCopyMethod;
OverlaySubclass.prototype.redraw = myRedrawMethod;
Im folgenden Beispiel wird ein Rectangle-Overlay erstellt, das eine geografische Region auf der Karte begrenzt. Die Klasse Rectangle definiert die vier erforderlichen Methoden des GOverlay-Interface. Beachten Sie insbesondere die Methode initialize(), die die DOM-Elemente für unser Overlay erstellt, und die Methode redraw(), welche Position und Größe des Overlays auf der Karte abhängig von der aktuellen Projektion und Zoomstufe bestimmt.
Jedes DOM-Element, aus dem ein Overlay besteht, ist in einem Kartenfenster vorhanden, dass die z-Reihenfolge definiert, in der es gezeichnet wird. Beispielsweise liegen Polylinien flach auf der Karte, daher werden sie im untersten G_MAP_MAP_PANE gezeichnet. Markierungen platzieren ihre Schattenelemente in G_MAP_MARKER_SHADOW_PANE und ihre Vordergrundelemente in G_MAP_MARKER_PANE. Dadurch, dass Sie Ihre Overlay-Elemente im richtigen Fenster platzieren, stellen Sie sicher, dass Polylinien unter Markierungsschatten und das Infofenster über anderen Overlays auf der Karte gezeichnet werden. In diesem Beispiel liegt unser Overlay flach auf der Karte, daher fügen wir es zum untersten Fenster der z-Reihenfolge G_MAP_MAP_PANE hinzu, genau wie GPolyline. Eine vollständige Liste der Kartenfenster finden Sie in der Klassenreferenz.
// A Rectangle is a simple overlay that outlines a lat/lng bounds on the
// map. It has a border of the given weight and color and can optionally
// have a semi-transparent background color.
function Rectangle(bounds, opt_weight, opt_color) {
Rectangle.prototype = new GOverlay();
// Remove the main DIV from the map pane
Rectangle.prototype.remove = function() {
// Copy our data to a new Rectangle
Rectangle.prototype.copy = function() {
// Redraw the rectangle based on the current projection and zoom level
Rectangle.prototype.redraw = function(force) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
// Display a rectangle in the center of the map at about a quarter of
// the size of the main map
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngDelta = (northEast.lng() - southWest.lng()) / 4;
var latDelta = (northEast.lat() - southWest.lat()) / 4;
var rectBounds = new GLatLngBounds(
// map. It has a border of the given weight and color and can optionally
// have a semi-transparent background color.
function Rectangle(bounds, opt_weight, opt_color) {
this.bounds_ = bounds;
this.weight_ = opt_weight || 2;
this.color_ = opt_color || "#888888";
} this.weight_ = opt_weight || 2;
this.color_ = opt_color || "#888888";
Rectangle.prototype = new GOverlay();
// Creates the DIV representing this rectangle.
Rectangle.prototype.initialize = function(map) {
// Create the DIV representing our rectangle
var div = document.createElement("div");
div.style.border = this.weight_ + "px solid " + this.color_;
div.style.position = "absolute";
// Our rectangle is flat against the map, so we add our selves to the
// MAP_PANE pane, which is at the same z-index as the map itself (i.e.,
// below the marker shadows)
map.getPane(G_MAP_MAP_PANE).appendChild(div);
this.map_ = map;
this.div_ = div;
} Rectangle.prototype.initialize = function(map) {
// Create the DIV representing our rectangle
var div = document.createElement("div");
div.style.border = this.weight_ + "px solid " + this.color_;
div.style.position = "absolute";
// Our rectangle is flat against the map, so we add our selves to the
// MAP_PANE pane, which is at the same z-index as the map itself (i.e.,
// below the marker shadows)
map.getPane(G_MAP_MAP_PANE).appendChild(div);
this.map_ = map;
this.div_ = div;
// Remove the main DIV from the map pane
Rectangle.prototype.remove = function() {
this.div_.parentNode.removeChild(this.div_);
} // Copy our data to a new Rectangle
Rectangle.prototype.copy = function() {
return new Rectangle(this.bounds_, this.weight_, this.color_,
} this.backgroundColor_, this.opacity_);
// Redraw the rectangle based on the current projection and zoom level
Rectangle.prototype.redraw = function(force) {
// We only need to redraw if the coordinate system has changed
if (!force) return;
// Calculate the DIV coordinates of two opposite corners of our bounds to
// get the size and position of our rectangle
var c1 = this.map_.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var c2 = this.map_.fromLatLngToDivPixel(this.bounds_.getNorthEast());
// Now position our DIV based on the DIV coordinates of our bounds
this.div_.style.width = Math.abs(c2.x - c1.x) + "px";
this.div_.style.height = Math.abs(c2.y - c1.y) + "px";
this.div_.style.left = (Math.min(c2.x, c1.x) - this.weight_) + "px";
this.div_.style.top = (Math.min(c2.y, c1.y) - this.weight_) + "px";
} if (!force) return;
// Calculate the DIV coordinates of two opposite corners of our bounds to
// get the size and position of our rectangle
var c1 = this.map_.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var c2 = this.map_.fromLatLngToDivPixel(this.bounds_.getNorthEast());
// Now position our DIV based on the DIV coordinates of our bounds
this.div_.style.width = Math.abs(c2.x - c1.x) + "px";
this.div_.style.height = Math.abs(c2.y - c1.y) + "px";
this.div_.style.left = (Math.min(c2.x, c1.x) - this.weight_) + "px";
this.div_.style.top = (Math.min(c2.y, c1.y) - this.weight_) + "px";
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
// Display a rectangle in the center of the map at about a quarter of
// the size of the main map
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngDelta = (northEast.lng() - southWest.lng()) / 4;
var latDelta = (northEast.lat() - southWest.lat()) / 4;
var rectBounds = new GLatLngBounds(
new GLatLng(southWest.lat() + latDelta, southWest.lng() + lngDelta),
new GLatLng(northEast.lat() - latDelta, northEast.lng() - lngDelta));
map.addOverlay(new Rectangle(rectBounds));new GLatLng(northEast.lat() - latDelta, northEast.lng() - lngDelta));
Beispiel anzeigen (overlay-custom.html)
zurück zum Start
© Google Maps