Google Maps -kontroles


Google Maps - Die verstekkontroles

Wanneer 'n standaard Google-kaart gewys word, kom dit met die verstekbeheerstel:

  • Zoem - vertoon 'n skuifbalk of "+/-"-knoppies om die zoemvlak van die kaart te beheer
  • Pan - vertoon 'n panbeheer om die kaart te skuif
  • MapType - laat die gebruiker wissel tussen kaarttipes (padkaart en satelliet)
  • Straataansig - vertoon 'n Pegman-ikoon wat na die kaart gesleep kan word om Straataansig te aktiveer

Google Maps - Meer kontroles

Benewens die verstekkontroles, het Google Maps ook:

  • Skaal - vertoon 'n kaartskaalelement
  • Draai - vertoon 'n klein sirkelvormige ikoon wat jou toelaat om kaarte te draai
  • Oorsigkaart - vertoon 'n duimnael-oorsigkaart wat die huidige kaartkykpoort binne 'n groter area weerspieël

Jy kan spesifiseer watter kontroles om te wys wanneer die kaart geskep word (binne MapOptions) of deur setOptions() te skakel om die kaart se opsies te verander.


Google Maps - Deaktiveer die verstekkontroles

Miskien wil jy eerder die verstekkontroles afskakel.

Om dit te doen, stel die kaart se disableDefaultUI-eienskap (binne die kaartopsies-objek) op waar:

Voorbeeld

var mapOptions {disableDefaultUI: true}


Google Maps - Skakel alle kontroles aan

Sommige kontroles verskyn by verstek op die kaart; terwyl ander nie sal verskyn tensy jy dit instel nie.

Die byvoeging of verwydering van kontroles van die kaart word in die Kaartopsies-objek gespesifiseer.

Stel die kontrole op waar om dit sigbaar te maak - Stel die kontrole op vals om dit te versteek.

Die volgende voorbeeld skakel alle kontroles aan:

Voorbeeld

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

Google Maps - Wysig kontroles

Verskeie van die kaartkontroles is konfigureerbaar.

Die kontroles kan gewysig word deur kontrole-opsiesvelde te spesifiseer.

Byvoorbeeld, opsies vir die wysiging van 'n Zoom-kontrole word in die zoomControlOptions-veld gespesifiseer. Die zoomControlOptions-veld kan die volgende bevat:

  • google.maps.ZoomControlStyle.SMALL - vertoon 'n mini-zoembeheer (slegs + en - knoppies)
  • google.maps.ZoomControlStyle.LARGE - vertoon die standaardzoem-skuifbeheer
  • google.maps.ZoomControlStyle.DEFAULT - kies die beste zoembeheer gebaseer op toestel en kaartgrootte

Voorbeeld

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

Let wel: As jy 'n kontrole wysig, aktiveer altyd eers die kontrole (stel dit op waar).

Nog 'n konfigureerbare beheer is die MapType-beheer.

Opsies vir die wysiging van 'n kontrole word in die mapTypeControlOptions-veld gespesifiseer. Die mapTypeControlOptions-veld kan bevat::

  • google.maps.MapTypeControlStyle.HORIZONTAL_BAR - vertoon een knoppie vir elke kaarttipe
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU - kies kaarttipe via 'n aftrekkieslys
  • google.maps.MapTypeControlStyle.DEFAULT - vertoon die "verstek" gedrag (hang af van skermgrootte)

Voorbeeld

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

Jy kan ook 'n kontrole posisioneer, met die ControlPosition-eienskap:

Voorbeeld

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