Eine Google-Karte - mit dem Standardsteuersatz:
Google Maps - Die Standard-Steuerelemente
Wenn Sie eine Standard-Google-Karte zeigt, kommt es mit dem Standardsteuersatz:
- Zoom - zeigt einen Schieberegler oder "+/-" Tasten , um die Zoomstufe der Karte zu steuern
- Pan - zeigt eine Pan-Regler für die Karte Panning
- MapType - kann der Benutzer Umschalten zwischen Kartentypen (roadmap and satellite)
- Street View - zeigt eine Pegman-Symbol, das auf der Karte gezogen werden kann Street View zu ermöglichen
Google Maps - Weitere Steuerelemente
Zusätzlich zu den Standard-Steuerelemente, auch Google Maps hat:
- Scale - zeigt eine Karte Skalenelement
- Drehen - zeigt ein kleines rundes Symbol, das Sie Karten zu drehen erlaubt
- Übersichtskarte - zeigt eine Thumbnail-Übersicht Karte die aktuelle Map-Ansichtsfenster in einem größeren Bereich reflektierenden
Sie können angeben , welche zeigen , steuert , wenn die Karte zu schaffen (inside MapOptions) oder telefonisch unter setOptions() zu ändern , die Kartenoptionen.
Google Maps - Deaktivieren der Standard-Steuerelemente
Sie können stattdessen wollen die Standardsteuerung ausschalten.
Dazu stellen Sie, die disableDefaultUI Unterkunft Karte (innerhalb der Karte Optionen Objekt) auf true:
Google Maps - Schalten Sie alle Bedienelemente
Einige Steuerelemente erscheinen auf der Karte standardmäßig; während andere wird nicht angezeigt, wenn Sie sie nicht gesetzt.
Hinzufügen oder Entfernen von Kontrollen aus der Karte in der Karte angegebenen Optionen Objekt.
Stellen Sie den Regler auf true, um es sichtbar zu machen - Stellen Sie die Steuerung auf false, es zu verbergen.
Im folgenden Beispiel wird "on" alle Bedienelemente:
Beispiel
panControl:true,
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true Versuch es selber " Google Maps - Ändern Kontrollen
Mehrere der Karte Kontrollen sind konfigurierbar.
Die Kontrollen können durch Angabe Steuerungsoptionen Felder geändert werden.
Zum Beispiel Optionen für eine Zoom-Steuerung modifiziert werden im Feld zoomcontroloptions angegeben. Das Feld zoomcontroloptions kann enthalten:
- google.maps.ZoomControlStyle.SMALL - zeigt eine Mini-Zoom-Steuerung (nur + und - Tasten)
- google.maps.ZoomControlStyle.LARGE - zeigt den Standard-Zoom-Schieberegler
- google.maps.ZoomControlStyle.DEFAULT - wählt die beste Kontrolle Zoom basierend auf Gerät und Kartengröße
Beispiel
zoomControl:true,
zoomControlOptions: {
style:google.maps.ZoomControlStyle.SMALL
}
Versuch es selber " Note: Wenn Sie ein Steuerelement zu ändern, aktivieren Sie immer die Kontrolle zuerst (set it to true) Sie (set it to true) .
Eine weitere konfigurierbare Steuerung ist die MapType Kontrolle.
Optionen zum Modifizieren einer Kontrolle sind in der mapTypeControlOptions Feld angegeben. Das mapTypeControlOptions Feld kann enthalten ::
- google.maps.MapTypeControlStyle.HORIZONTAL_BAR - Anzeige eine Taste für jeden Kartentyp
- google.maps.MapTypeControlStyle.DROPDOWN_MENU - wählen Sie den Kartentyp über ein Drop-Down-Menü
- google.maps.MapTypeControlStyle.DEFAULT - zeigt die "default" Verhalten (depends on screen size) der (depends on screen size)
Beispiel
mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU
} Versuch es selber " Sie können auch eine Steuerung, mit der Control Eigenschaft positionieren:
Beispiel
mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position:google.maps.ControlPosition.TOP_CENTER
} Versuch es selber " Google Maps - Custom Controls
Erstellen Sie eine benutzerdefinierte Steuerelement , das Sie immer wieder in London stattfindet, wenn darauf geklickt wird (if the map is dragged) :
Beispiel
controlDiv.style.padding = '5px';
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'yellow';
controlUI.style.border='1px solid';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Set map to London';
controlDiv.appendChild(controlUI);
var controlText = document.createElement('div');
controlText.style.fontFamily='Arial,sans-serif';
controlText.style.fontSize='12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = '<b>Home<b>'
controlUI.appendChild(controlText); Versuch es selber " Google Maps - Steuert Referenz
Google Maps - API - Referenz .