Ultimele tutoriale de dezvoltare web
 

Google Maps Controale


O hartă Google - cu setul de control prestabilit:


Hărți Google - Controale implicite

Când se afișează o hartă Google standard vine cu setul de control prestabilit:

  • Zoom - afișează un cursor sau "+/-" butoane pentru a controla nivelul de zoom al hărții
  • Pan - afișează un control pan pentru panoramare hărții
  • Maptype - permite utilizatorului de comutare între tipuri de hărți (roadmap and satellite) de (roadmap and satellite)
  • Street View - afișează o pictogramă Pegman care poate fi tras la harta pentru a permite Street View

Hărți Google - Mai multe controale pentru

În plus față de controalele implicite, Google Maps are, de asemenea:

  • Scale - afișează un element de hartă la scară
  • Rotire - afișează o pictogramă mică circulară care vă permite să se rotească hărți
  • Privire de ansamblu Hartă - afișează o hartă generală în miniatură care reflectă viewport de hartă într-o zonă mai largă

Puteți specifica care controlează pentru a arăta la crearea hărții (inside MapOptions) în setOptions() (inside MapOptions) sau prin apelarea setOptions() pentru a schimba opțiunile de pe hartă.


Hărți Google - Dezactivarea Controalele implicite

în schimb, vă recomandăm să dezactivați controalele implicite.

Pentru a face acest lucru, setați proprietatea hărții disableDefaultUI (în Opțiuni hartă obiect) la true:

Exemplu

disableDefaultUI:true
Încearcă - l singur »

Hărți Google - Activare toate controalele

Unele controale apar pe hartă în mod implicit; în timp ce altele nu vor apărea dacă nu le setați.

Adăugarea sau eliminarea controalelor de pe hartă este specificat în foaia de opoziție opțiuni.

Setați controlul la true pentru a face vizibil - Setați controlul la fals să-l ascundă.

Următorul exemplu se transformă "on" toate controalele:

Exemplu

panControl:true,
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true
Încearcă - l singur »

Hărți Google - Controale Modificarea

Mai multe dintre comenzile harta sunt configurabile.

Controalele pot fi modificate prin specificarea câmpurilor opțiuni de control.

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

  • google.maps.ZoomControlStyle.SMALL - afișează un control mini-zoom (doar + și - butoane)
  • google.maps.ZoomControlStyle.LARGE - afișează standardul cursorului de zoom
  • google.maps.ZoomControlStyle.DEFAULT - alege cel mai bun control zoom bazat pe dispozitiv și dimensiunea hărții

Exemplu

zoomControl:true,
zoomControlOptions: {
    style:google.maps.ZoomControlStyle.SMALL
}
Încearcă - l singur »

Note: Dacă modificați un control, activați întotdeauna controlul primului (set it to true) .

Un alt control al configurabil este controlul maptype.

Opțiuni pentru modificarea unui control sunt specificate în câmpul mapTypeControlOptions. Câmpul mapTypeControlOptions poate conține ::

  • google.maps.MapTypeControlStyle.HORIZONTAL_BAR - un singur buton de afișare pentru fiecare tip de hartă
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU - selectați tip de hartă prin intermediul unui meniu drop-down
  • google.maps.MapTypeControlStyle.DEFAULT - afișează "default" comportamentul (depends on screen size)

Exemplu

mapTypeControl:true,
mapTypeControlOptions: {
    style:google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
Încearcă - l singur »

Puteți poziționa, de asemenea, un control, cu proprietatea ControlPosition:

Exemplu

mapTypeControl:true,
mapTypeControlOptions: {
    style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,
    position:google.maps.ControlPosition.TOP_CENTER
}
Încearcă - l singur »

Hărți Google - comenzi personalizate

Creați un control personalizat care te duce întotdeauna înapoi la Londra, când faceți clic (if the map is dragged) în (if the map is dragged) care (if the map is dragged) :

Exemplu

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);
Încearcă - l singur »

Hărți Google - Controale de referință

Google Maps API - ul de referință .