Bedienelemente
- Ãœbersicht der Kartenbedienelemente
- Bedienelemente zur Karte hinzufügen
- Bedienelemente auf der Karte positionieren
- Aufbau der Standardbedienelemente ändern
- Benutzerdefinierte Bedienelemente erstellen
Ãœbersicht der Bedienelemente
Die Karten unter http://maps.google.de enthalten Benutzeroberflächenelemente, die eine Nutzerinteraktion mit der Karte erlauben. Diese Elemente werden Bedienelemente genannt, die Sie anpassen und in Ihre Google Maps-API-Anwendung einbauen können. Sie können auch Ihre eigenen benutzerdefinierten Bedienelemente erstellen, indem Sie eine Unterklasse der Klasse GControl anlegen.
Das Maps-API enthält einige integrierte Bedienelemente, die Sie in Ihren Karten verwenden können:
• GLargeMapControl - ein großes Bedienelement zum Schwenken und Zoomen, das auch in Google Maps verwendet wird. Standardmäßig wird es in der oberen linken Ecke der Karte angezeigt.
• GSmallMapControl - ein kleineres Bedienelement zum Schwenken und Zoomen, das auch in Google Maps verwendet wird. Standardmäßig wird es in der oberen linken Ecke der Karte angezeigt.
• GSmallZoomControl - ein kleines Zoom-Bedienelement (ohne Schwenkfunktion), das in den kleinen Blowup-Fenstern der Karte verwendet wird, die Fahrtanweisungen in Google Maps anzeigen
• GScaleControl - ein Kartenmaßstabs-Bedienelement
• GMapTypeControl - Schaltflächen, mit denen der Nutzer zwischen Kartentypen (z. B. Karte und Satellit) umschalten kann
• GHierarchicalMapTypeControl - eine verschachtelte Auswahl an Schaltflächen und Menüelementen zum Platzieren vieler Kartentyp-Selektoren.
• GOverviewMapControl - eine zusammenklappbare Übersichtskarte in der Ecke des Bildschirms
Alle diese Bedienelemente basieren auf dem Objekt GControl.
GMapTypeControl und GHierarchicalMapTypeControl sind Sonderfälle, da sie ebenfalls konfigurierbar sind. Diese Bedienelemente ermöglichen das Ändern von GMapType, das aktuell von der Karte im Google Maps-API verwendet wird. Weitere Informationen zum Konfigurieren dieser Bedienelemente finden Sie unter Aufbau der Standardbedienelemente ändern.
Nachfolgend finden Sie eine Liste der aktuell unterstützten Kartentypen:
• G_NORMAL_MAP zeigt die normalen Standard-2D-Kacheln von Google Maps an
• G_SATELLITE_MAP zeigt Fotokacheln an
• G_HYBRID_MAP zeigt eine Mischung aus Fotokacheln und eine Kachelebene für markante Funktionen an (Straßen, Ortsnamen)
• G_PHYSICAL_MAP zeigt physische Kartenkacheln an, die auf Geländeinformationen basieren
Sie können auch Ihre eigenen benutzerdefinierten Kartentypen erstellen, wenn Sie über eigene Bilder oder selbst definierte Overlays verfügen.
Standardmäßig stellt das Google Maps-API drei Kartentypen zur Verfügung: G_NORMAL_MAP, G_SATELLITE_MAP und G_HYBRID_MAP. Sie können die zur Verfügung stehenden Kartentypen mit GMap2.removeMapType() von einer Karte entfernen oder mit GMap2.addMapType() zu einer Karte hinzufügen. Wenn Sie ein Kartentyp-Bedienelement erstellen, verwendet es die aktuell zugeordneten Kartentypen und macht sie über das Bedienelement verfügbar. Beachten Sie, dass Sie alle Beziehungen zwischen Kartentypen angeben müssen, bevor Sie das Bedienelement hinzufügen, damit das Kartentyp-Bedienelement diese Beziehungen empfangen kann.
Der nachfolgende Code entfernt G_HYBRID_MAP von den einer Karte zugeordneten verfügbaren Kartentypen und behält nur zwei Kartentypen bei. Wenn Sie GMapTypeControl hinzufügen, sind nur diese beiden Kartentypen verfügbar.
var map = new GMap2(document.getElementById("map_canvas"),
{ size: new GSize(640,320) } );
map.removeMapType(G_HYBRID_MAP);
map.setCenter(new GLatLng(42.366662,-71.106262), 11);
var mapControl = new GMapTypeControl();
map.addControl(mapControl);
map.addControl(new GLargeMapControl());
{ size: new GSize(640,320) } );
map.removeMapType(G_HYBRID_MAP);
map.setCenter(new GLatLng(42.366662,-71.106262), 11);
var mapControl = new GMapTypeControl();
map.addControl(mapControl);
map.addControl(new GLargeMapControl());
Beispiel anzeigen (control-maptypes.html)
Bedienelemente zur Karte hinzufügen
zurück zum StartMit der GMap2-Methode addControl() fügen Sie Bedienelemente zur Karte hinzu. Wenn Sie beispielsweise das Bedienelement zum Schwenken und Zoomen, das Sie auf Google Maps sehen, zu Ihrer Karte hinzufügen möchten, fügen Sie die folgende Zeile zu Ihrer Karteninitialisierung hinzu:
map.addControl(new GLargeMapControl());
Sie können mehrere Bedienelemente zu einer Karte hinzufügen. In diesem Fall fügen Sie die integrierten Bedienelemente GSmallMapControl und GMapTypeControl hinzu, mit denen Sie die Karte schwenken und zoomen sowie zwischen dem Karten- und dem Satellitenmodus umschalten können. Die Standardbedienelemente sind voll funktionsfähig, sobald sie in eine Karte integriert 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);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
Beispiel anzeigen (control-simple.html)
Bedienelemente auf der Karte positionieren
zurück zum StartDie Methode addControl verwendet einen optionalen zweiten GControlPosition-Parameter, mit dem Sie die Position des Bedienelements auf Ihrer Karte angeben können. Dieser Wert kann einer der folgenden Werte sein, von denen jeder eine Ecke der Karte angibt, in der das Bedienelement platziert werden kann:
• G_ANCHOR_TOP_RIGHT
• G_ANCHOR_TOP_LEFT
• G_ANCHOR_BOTTOM_RIGHT
• G_ANCHOR_BOTTOM_LEFT
Wenn dieses Argument weggelassen wird, verwendet das Google Maps-API die vom Bedienelement angegebene Standardposition.
Der Parameter GControlPosition kann optional ein Offset angeben, mit dem der Abstand des Bedienelements vom Kartenrand in Pixel festgelegt wird. Diese Offsets werden mithilfe eines GSize-Objekts angegeben.
In diesem Beispiel wird das GMapTypeControl in der oberen rechten Ecke der Karte mit 10 Pixeln Abstand hinzugefügt. Doppelklicken Sie auf eine beliebige Stelle auf der Karte, um das Bedienelement zu entfernen und in der unteren rechten Ecke der Karte zu platzieren.
var map = new GMap2(document.getElementById"map_canvas"));
var mapTypeControl = new GMapTypeControl();
var topRight = new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10,10));
var bottomRight = new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,10));
map.addControl(mapTypeControl, topRight);
GEvent.addListener(map, "dblclick", function() {
map.removeControl(mapTypeControl);
map.addControl(new GMapTypeControl(), bottomRight);
});
map.addControl(new GSmallMapControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
var mapTypeControl = new GMapTypeControl();
var topRight = new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10,10));
var bottomRight = new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,10));
map.addControl(mapTypeControl, topRight);
GEvent.addListener(map, "dblclick", function() {
map.removeControl(mapTypeControl);
map.addControl(new GMapTypeControl(), bottomRight);
});
map.addControl(new GSmallMapControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
Beispiel anzeigen (control-positioning.html)
Weitere Informationen hierzu finden Sie in der GControlPosition-Klassenreferenz.
Aufbau der Standardbedienelemente ändern
zurück zum StartDie meisten Bedienelemente im Google Maps-API bieten ein einfaches Bedienelement mit Standardverhalten. Einige Bedienelemente benötigen jedoch eine Initialisierung für eine ordnungsgemäße Verwendung. GHierarchicalMapTypeControl beispielsweise benötigt grundsätzlich eine Initialisierung, um Kartentypen in einem überlappenden "Menü" in der korrekten Reihenfolge anzuzeigen.
In diesem Beispiel wird der G_PHYSICAL_MAP-Kartentyp mit einem Fadenkreuz-Kachelebenen-Overlay zur Karte hinzugefügt und anschließend ein GHierarchicalMapTypeControl erstellt, um die zusätzlich zur Karte hinzugefügten Kartentypen anzuordnen.
// define the crosshair tile layer and its required functions
var crossLayer = new GTileLayer(new GCopyrightCollection(""), 0, 15); crossLayer.getTileUrl = function(tile, zoom) {
return "./include/tile_crosshairs.png";
}
crossLayer.isPng = function() {return true;} // Create a new map type incorporating the tile layer
var layerTerCross = [ G_PHYSICAL_MAP.getTileLayers()[0], crossLayer ];
var mtTerCross = new GMapType(layerTerCross,
G_PHYSICAL_MAP.getProjection(), "Ter+");
var map = new GMap2(document.getElementById("map_canvas"),
{ size: new GSize(640,320) } );
map.addMapType(G_PHYSICAL_MAP);
map.addMapType(mtTerCross);
map.setCenter(new GLatLng(37.4419, -122.1419), 4);
var mapControl = new GHierarchicalMapTypeControl();
// Set up map type menu relationships
mapControl.clearRelationships();
mapControl.addRelationship(G_SATELLITE_MAP, G_HYBRID_MAP, "Labels", false);
mapControl.addRelationship(G_PHYSICAL_MAP, mtTerCross, "Crosshairs");
// Add control after you've specified the relationships
map.addControl(mapControl);
map.addControl(new GLargeMapControl());
var crossLayer = new GTileLayer(new GCopyrightCollection(""), 0, 15); crossLayer.getTileUrl = function(tile, zoom) {
return "./include/tile_crosshairs.png";
}
crossLayer.isPng = function() {return true;} // Create a new map type incorporating the tile layer
var layerTerCross = [ G_PHYSICAL_MAP.getTileLayers()[0], crossLayer ];
var mtTerCross = new GMapType(layerTerCross,
G_PHYSICAL_MAP.getProjection(), "Ter+");
var map = new GMap2(document.getElementById("map_canvas"),
{ size: new GSize(640,320) } );
map.addMapType(G_PHYSICAL_MAP);
map.addMapType(mtTerCross);
map.setCenter(new GLatLng(37.4419, -122.1419), 4);
var mapControl = new GHierarchicalMapTypeControl();
// Set up map type menu relationships
mapControl.clearRelationships();
mapControl.addRelationship(G_SATELLITE_MAP, G_HYBRID_MAP, "Labels", false);
mapControl.addRelationship(G_PHYSICAL_MAP, mtTerCross, "Crosshairs");
// Add control after you've specified the relationships
map.addControl(mapControl);
map.addControl(new GLargeMapControl());
Beispiel anzeigen (control-initialization.html)
Benutzerdefinierte Kartenbedienelemente
zurück zum StartDas Google Maps-API ermöglicht Ihnen auch die Erstellung benutzerdefinierter Kartenbedienelemente durch Anlegen einer Unterklasse von GControl. (Technisch gesehen erstellen Sie keine "Unterklasse" eines Objekts in JavaScript, sondern weisen ein prototype-Objekt einer Instanz des GControl-Objekts zu.)
Wenn Sie ein benutzerdefiniertes Bedienelement erstellen möchten, müssen Sie Handler für mindestens zwei Methode auf der Klasse definieren: initialize() und getDefaultPosition(). Die Methode initialize() muss ein DOM-Element zurückgeben, während die Methode getDefaultPosition() ein Objekt des Typs GControlPosition zurückgeben muss.
Alle Kartenbedienelemente sollten zum Kartencontainer hinzugefügt werden, auf den mit der Methode getContainer() von GMap2 zugegriffen werden kann.
In diesem Beispiel wird ein einfaches Zoom-Bedienelement erstellt, das Textlinks statt der grafischen Symbole enthält, die im standardmäßigen Google Maps-Zoom-Bedienelement verwendet werden.
// A TextualZoomControl is a GControl that displays textual "Zoom In"
// and "Zoom Out" buttons (as opposed to the iconic buttons used in
// Google Maps). // We define the function first
function TextualZoomControl() {
}
// To "subclass" the GControl, we set the prototype object to
// an instance of the GControl object
TextualZoomControl.prototype = new GControl();
// Creates a one DIV for each of the buttons and places them in a container
// DIV which is returned as our control element. We add the control to
// to the map container and return the element for the map class to
// position properly.
TextualZoomControl.prototype.initialize = function(map) {
var container = document.createElement("div");
var zoomInDiv = document.createElement("div");
this.setButtonStyle_(zoomInDiv);
container.appendChild(zoomInDiv);
zoomInDiv.appendChild(document.createTextNode("Zoom In"));
GEvent.addDomListener(zoomInDiv, "click", function() {
map.zoomIn();
});
var zoomOutDiv = document.createElement("div");
this.setButtonStyle_(zoomOutDiv);
container.appendChild(zoomOutDiv);
zoomOutDiv.appendChild(document.createTextNode("Zoom Out"));
GEvent.addDomListener(zoomOutDiv, "click", function() {
map.zoomOut();
});
map.getContainer().appendChild(container);
return container;
}
// By default, the control will appear in the top left corner of the
// map with 7 pixels of padding.
TextualZoomControl.prototype.getDefaultPosition = function() {
return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
}
// Sets the proper CSS for the given button element.
TextualZoomControl.prototype.setButtonStyle_ = function(button) {
button.style.textDecoration = "underline";
button.style.color = "#0000cc";
button.style.backgroundColor = "white";
button.style.font = "small Arial";
button.style.border = "1px solid black";
button.style.padding = "2px";
button.style.marginBottom = "3px";
button.style.textAlign = "center";
button.style.width = "6em";
button.style.cursor = "pointer";
}
var map = new GMap2(document.getElementById("map"));
map.addControl(new TextualZoomControl());
map.setCenter(new GLatLng(37.441944, -122.141944), 13);
// and "Zoom Out" buttons (as opposed to the iconic buttons used in
// Google Maps). // We define the function first
function TextualZoomControl() {
}
// To "subclass" the GControl, we set the prototype object to
// an instance of the GControl object
TextualZoomControl.prototype = new GControl();
// Creates a one DIV for each of the buttons and places them in a container
// DIV which is returned as our control element. We add the control to
// to the map container and return the element for the map class to
// position properly.
TextualZoomControl.prototype.initialize = function(map) {
var container = document.createElement("div");
var zoomInDiv = document.createElement("div");
this.setButtonStyle_(zoomInDiv);
container.appendChild(zoomInDiv);
zoomInDiv.appendChild(document.createTextNode("Zoom In"));
GEvent.addDomListener(zoomInDiv, "click", function() {
map.zoomIn();
});
var zoomOutDiv = document.createElement("div");
this.setButtonStyle_(zoomOutDiv);
container.appendChild(zoomOutDiv);
zoomOutDiv.appendChild(document.createTextNode("Zoom Out"));
GEvent.addDomListener(zoomOutDiv, "click", function() {
map.zoomOut();
});
map.getContainer().appendChild(container);
return container;
}
// By default, the control will appear in the top left corner of the
// map with 7 pixels of padding.
TextualZoomControl.prototype.getDefaultPosition = function() {
return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
}
// Sets the proper CSS for the given button element.
TextualZoomControl.prototype.setButtonStyle_ = function(button) {
button.style.textDecoration = "underline";
button.style.color = "#0000cc";
button.style.backgroundColor = "white";
button.style.font = "small Arial";
button.style.border = "1px solid black";
button.style.padding = "2px";
button.style.marginBottom = "3px";
button.style.textAlign = "center";
button.style.width = "6em";
button.style.cursor = "pointer";
}
var map = new GMap2(document.getElementById("map"));
map.addControl(new TextualZoomControl());
map.setCenter(new GLatLng(37.441944, -122.141944), 13);
Beispiel anzeigen (control-custom.html)
zurück zum Start
© Google Maps