Google Maps Control Set
Una mappa di Google - il set di controllo di default è impostato:
Google Maps - set di controllo di default è impostato:
Quando si utilizza una mappa standard di Google, le impostazioni predefinite sono le seguenti:
- .Zoom- Visualizza una barra di scorrimento per controllare il livello di zoom mappa
- .PPan- Sul display carta è un appartamento controlli ciotola-like, clicca sui quattro angoli della teglia mappa
- .MapType- Consente all'utente di selezionare tra i tipi di mappe (tabella di marcia e satallitare) interruttore
- .StreetView- Appare come una icona di Pegman, è possibile trascinarlo in un punto sulla mappa per aprire Street View
Google Maps - un maggiore controllo set
In aggiunta a quanto sopra set di controlli di default, Google anche:
- .Scale- Visualizza mappa d'scala
- .Rotate- Visualizzare una piccola circonferenza della icona, è possibile ruotare la mappa
- .verview Mappa-vista in pianta dal punto di vista di una mappa a livello di zona
Quando si crea una mappa è possibile specificare quale set di controlli viene visualizzato impostando l'opzione o chiamando setOptions () per modificare le opzioni di impostazione della mappa.
Google Maps - spegnere il set di controlli di default
Si consiglia di disattivare il set predefinito di controlli.
Per disattivare il set di controlli di default, impostare la proprietà per mappare disableDefaultUI vero:
Google Maps - tutti i controlli impostati per aprire
Alcuni controlli impostare la visualizzazione predefinita sulla mappa, mentre altri no, a meno che non li imposta.
Impostare il controllo per renderlo visibile vero - impostare il controllo su false per nasconderlo.
Gli esempi che seguono sono aperti tutti i comandi:
Esempi
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true
Prova »
Google Maps - modificare il set di controllo
Alcuni controlli mappe sono configurabili. Modificare controllo impostato attraverso lo sviluppo di campo opzioni di controllo.
F Ad esempio, per modificare l'opzione di controllo dello zoom specifica zoomControlOptions. zoomControlOptions contiene le seguenti tre opzioni:
- .google.maps.ZoomControlStyle.SMALL- visualizzazione ridurre al minimo il controllo dello zoom
- .google.maps.ZoomControlStyle.LARGE- zoom standard presentazione controlli
- .google.maps.ZoomControlStyle.DEFAULT- attrezzature e dimensioni della mappa base, selezionare il controllo più appropriato
Esempi
zoomControlOptions : {
style : google . maps . ZoomControlStyle . SMALL
}
Prova »
Nota: Se ènecessario modificare un controllo, il controllo primo turno (impostata su true).
Un altro controllo è il controllo maptype.
Maptype controllo può apparire in una delle seguenti opzioni di stile:
- google.maps.MapTypeControlStyle.HORIZONTAL_BAR, in una barra orizzontale apparirà come una serie di pulsanti di controllo, come mostrato in Google Maps.
- google.maps.MapTypeControlStyle.DROPDOWN_MENU, per la visualizzazione di un singolo pulsante di controllo, che consente di selezionare il tipo di carta dal menu a discesa.
- google.maps.MapTypeControlStyle.DEFAULT, per la visualizzazione del comportamento "default", che dipende dalle dimensioni dello schermo e possono cambiare nelle future versioni delle API.
Esempi
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
Prova »
Allo stesso modo, è possibile utilizzare il controllo di proprietà posizione ControlPosition specificato:
Esempi
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position:google.maps.ControlPosition.TOP_CENTER
}
Prova »
Google Maps - set di controlli personalizzati
Creare un controllo personalizzato di tornare a Londra per l'evento Click: (Se la mappa viene trascinato):
Esempi
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);
Prova »