Google Maps Kontroller

Google Maps - Standardkontroller

Når standard Google Maps vises, tilbyder den en standardmængde kontroller:

  • Zoom (Zoom) - Vis en glidebogstave eller "+/-"-knapper til at kontrollere kortets zoomniveau
  • Glid (Pan) - Vis kontroller til glidning af kortet
  • Korttype (MapType) - Tillader brugeren at skifte mellem korttyper (ruteplan og satellitbillede)
  • Gadebillede (Street View) - Vis en ikon af en små person (Pegman icon), som kan trækkes til kortet for at aktivere gadebillede

Google Maps - Flere kontroller

Udover standardkontrollerne tilbyder Google Maps også:

  • Skala (Scale) - Vis elementer for kortets skala
  • Rotation (Rotate) - Vis en lille cirkulær ikon, der tillader dig at rotere kortet
  • Oversigt over kort (Overview Map) - Vis en miniatureoversigt over kortet, der reflekterer det bredere område, som den aktuelle kortvisning dækker

Du kan specificere hvilke kontroller der skal vises, når kortet oprettes (i MapOptions) eller ændre kortets indstillinger ved at kalde setOptions().

Google Maps - Deaktiver standardkontroller

Du kan måske ønske at deaktivere standardkontrollerne.

For dette, sæt kortets disableDefaultUI-egenskab (i kortets indstillingsobjekt) til true:

eksempel

var mapOptions {disableDefaultUI: true}

Google Maps - Åbn alle kontroller

Nogle kontroller vises som standard på kortet; andre vises ikke, medmindre du sætter dem til det.

Angiv i objektet med kortindstillinger, hvilke kontroller der skal tilføjes eller fjernes til kortet.

Sæt kontrollerne til true for at gøre dem synlige - sæt dem til false for at skjule dem.

Dette eksempel åbner alle kontroller:

eksempel

var mapOptions {
  panControl: true,
  zoomControl: true,
  mapTypeControl: true,
  scaleControl: true,
  streetViewControl: true,
  overviewMapControl: true,
  rotateControl: true
}

Google Maps - ændring af kontrollejer

Nogle kortkontrollejer er konfigurerbare.

Du kan ændre kontrollejen ved at specificere kontrolindstillingsfeltet.

For eksempel definerer zoomControlOptions-feltet indstillingerne til at ændre Zoom-kontrolejen. zoomControlOptions-feltet kan indeholde:

  • google.maps.ZoomControlStyle.SMALL - viser mini zoomkontrol (kun + og - knapper)
  • google.maps.ZoomControlStyle.LARGE - viser standard zoom glidekontrol
  • google.maps.ZoomControlStyle.DEFAULT - vælg den bedste zoomkontrol baseret på enhed og kortstørrelse

eksempel

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

Bemærk: Hvis du vil ændre kontrollejen, skal du først aktivere den (sæt den til true).

En anden konfigurerbar kontrol er MapType-kontrolejen.

mapTypeControlOptions-feltet definerer indstillingerne til kontrollejen. mapTypeControlOptions-feltet kan indeholde:

  • google.maps.MapTypeControlStyle.HORIZONTAL_BAR - viser en knap for hver korttype
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU - vælg korttypen gennem en rullemenu
  • google.maps.MapTypeControlStyle.DEFAULT - viser "standard" adfærd (afhænger af skærmskærmstørrelsen)

eksempel

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

Du kan også bruge ControlPosition-eegenskaben til at placere kontrollejen:

eksempel

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