Google Maps Regelung eingestellt

Zurück: Google Maps Ereignis

Weiter: Google - Kartentypen

Eine Google-Karte - die Standard-Steuersatz festgelegt ist:

Google Maps - Standardsteuersatz festgelegt ist:

Wenn Sie eine Standard-Google-Karte verwenden, sind die Standardeinstellungen wie folgt:

.Zoom- Zeigt einen Schieberegler die Zoomstufe der Karte zu steuern
.PPan- Auf der Kartendarstellung ist eine flache schalenartige Kontrollen, klicken Sie auf die vier Ecken der Karte die Pfanne
.MapType- Ermöglicht es dem Benutzer zwischen den Kartentypen auszuwählen (Roadmap und satallite) Schalter
.StreetView- Erscheint als Pegman Symbol, können Sie es zu einem Punkt auf der Karte ziehen Street View zu öffnen

Google Maps - mehr Steuersatz

Zusätzlich zu den oben genannten Standardsteuersatz, Google auch:

.Scale- Anzeigekartenmaßstab
Zeigen Sie einen kleinen Umfang des Symbols .Rotate-, können Sie die Karte drehen
.verview Map- Draufsicht aus der Perspektive eines Großraumkarte

Wenn Sie eine Karte erstellen, können Sie die Gruppe von Steuerelementen festlegen, indem Sie die Option angezeigt wird, oder von setOptions () aufgerufen, um die Karte Optionen Einstellung ändern.

Google Maps - die Standard-Steuersatz deaktivieren

Sie können den Standardsatz von Kontrollen deaktivieren möchten.

So schalten Sie die Standard-Steuersatz, setzen Sie die Eigenschaft aus disableDefaultUI wahr abzubilden:

Beispiele

disableDefaultUI:true

Versuchen »

Google Maps - alle Bedienelemente einstellen zu öffnen

Einige Bedienelemente stellen Sie die Standardanzeige auf der Karte, während andere nicht, wenn man sie nicht festgelegt.

Stellen Sie den Regler, um sie sichtbar zu machen wahr - Stellen Sie die Steuerung auf false, es zu verbergen.

Die folgenden Beispiele sind offen, alle Steuerelemente:

Beispiele

panControl:true,
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true

Versuchen »

Google Maps - Ändern Sie den Steuersatz

Einige Karten Kontrollen sind konfigurierbar. Ändern Steuerung eingestellt von Steuerungsoptionen Feld zu entwickeln.

F Zum Beispiel kann die Zoomsteuerung Option gibt zoomcontroloptions zu ändern. zoomcontroloptions enthält die folgenden drei Möglichkeiten:

.google.maps.ZoomControlStyle.SMALL- Anzeige Zoom-Steuerung minimieren
.google.maps.ZoomControlStyle.LARGE- Standard-Zoom Diashowsteuerung
.google.maps.ZoomControlStyle.DEFAULT- basierte Geräte und Größe der Karte, wählen Sie die am besten geeignete Steuer

Beispiele

zoomControl : true ,
zoomControlOptions : {
style : google . maps . ZoomControlStyle . SMALL
}

Versuchen »

Hinweis: Wenn Sieeine Steuerung, schalten Sie zuerst Kontrolle zu ändern (Einstellung auf true).

Eine weitere Kontrolle ist MapType Kontrolle.

MapType Steuerung kann in einem der folgenden Stil Optionen angezeigt:

google.maps.MapTypeControlStyle.HORIZONTAL_BAR, in einer horizontalen Leiste wird als eine Reihe von Steuertasten erscheinen wie in Google Maps angezeigt.
google.maps.MapTypeControlStyle.DROPDOWN_MENU, für einen einzigen Tastensteuerung angezeigt werden, so dass Sie den Kartentyp aus dem Dropdown-Menü auswählen.
google.maps.MapTypeControlStyle.DEFAULT, zur Anzeige des "default" Verhalten, das auf Bildschirmgröße ab und kann in zukünftigen Versionen der API ändern.

Beispiele

mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU
}

Versuchen »

In ähnlicher Weise können Sie den Speicherort Control Eigenschaft angegebene Steuerelement verwenden:

Beispiele

mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position:google.maps.ControlPosition.TOP_CENTER
}

Versuchen »

Google Maps - Set Custom Controls

Erstellen Sie eine benutzerdefinierte Steuerung nach London für das Click-Ereignis zurückzukehren: (Wenn die Karte gezogen wird):

Beispiele

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);

Versuchen »