Controalele Google Maps

Harta Google - cu setul implicit de gestionare:

Google Maps - comenzi implicite

Atunci când afișează o hartă Google standard, vine cu setul implicit de gestionare:







  • Scară - afișează un buton glisant sau "+/-" pentru a controla nivelul de mărire al hărții
  • Pan - afișează comenzi pan pentru derularea hărților
  • MapType - permite utilizatorului să comute între tipurile de hărți (foaie de parcurs și satelit)
  • Vedere pe stradă - Afișează o pictogramă mică pe care o puteți glisa pe hartă pentru a permite Street View

Hărți Google - comenzi suplimentare

În plus față de gestionarea în mod prestabilit, Google Maps are de asemenea:

Google Maps - Dezactivați gestionarea implicită

În schimb, doriți să dezactivați gestionarea implicită.

Pentru aceasta, setați proprietatea disableDefaultUI a hărții (în cadrul obiectului de opțiune hartă) la adevărat:

Google Maps - Activați toate comenzile

Unele comenzi sunt afișate pe hartă în mod implicit; În timp ce altele nu vor apărea, dacă le instalați.

Adăugarea sau eliminarea comenzilor de pe hartă este specificată în harta obiectului Parametru.

Setați comanda la adevărat pentru a fi vizibilă - Setați butonul la fals pentru a-l ascunde.

Următorul exemplu produce "on" toate comenzile:

panControl: adevărat,
zoomControl: true,
mapTypeControl: true,
scaleControl: adevărat,
streetViewControl: adevărat,
overviewMapControl: true,
rotateControl: true

Hărți Google - Editați comenzile







Unele dintre comenzile de pe hartă sunt configurabile.

Comenzile pot fi modificate prin specificarea opțiunilor de control al câmpului.

De exemplu, opțiunile pentru modificarea controlului zoom sunt specificate în câmpul ZoomControlOptions. Câmpul ZoomControlOptions poate conține:

  • google.maps.ZoomControlStyle.SMALL - afișează controlul mini-zoom (numai butoanele + și -)
  • google.maps.ZoomControlStyle.LARGE - arată glisorul de scalare standard
  • google.maps.ZoomControlStyle.DEFAULT - selectează cel mai bun control asupra scalării în funcție de dispozitiv și dimensiunea hărții

Notă: Când schimbați un control, este întotdeauna posibil să controlați primul (setați-l la adevărat).

Un alt control personalizabil este controlul MapType.

Opțiunile pentru modificarea comenzii sunt specificate în câmpul MapTypeControlOptions. Câmpul MapTypeControlOptions poate conține.

  • google.maps.MapTypeControlStyle.HORIZONTAL_BAR - afișarea unui singur buton pentru fiecare tip de card
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU - selectați un tip de hartă utilizând meniul drop-down
  • google.maps.MapTypeControlStyle.DEFAULT - afișează "depinde de dimensiunea ecranului" în "depinde de dimensiunea ecranului" în (depinde de dimensiunea ecranului)

De asemenea, puteți plasa un control cu ​​proprietatea ControlPosition:

mapTypeControl: true,
mapTypeControlOptions: stil: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
poziție: google.maps.ControlPosition.TOP_CENTER
>

Google Maps - comenzi personalizate

Creați un control personalizat. care vă întoarce întotdeauna la Londra când faceți clic (dacă harta este trasă).

controlDiv.style.padding = '5px';
var controlUI = document.createElement ("div");
controlUI.style.backgroundColor = 'galben';
controlUI.style.border = '1px solid';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'centru';
controlUI.title = 'Setați harta la Londra';
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 = 'acasă'
controlUI.appendChild (controlText);

Google Maps - Referințe de control







Articole similare

Trimiteți-le prietenilor: