Latest web development tutorials

Google Maps kontroli wymienione

Google Map - domyślny zestaw sterowania jest ustawiona:


Mapy Google - domyślny zestaw sterowania jest ustawiona:

Przy użyciu standardowego mapa Google, jego ustawienia domyślne są następujące:

  • .Zoom- Wyświetla suwak do kontrolowania poziomu powiększenia mapy
  • .PPan- Na ekranie mapy jest płaski kontrole miska podobny, kliknij na czterech rogach przesuwać mapę
  • .MapType- Pozwala użytkownikowi na wybór pomiędzy różnymi rodzajami map (mapy drogowej i satallite) Przełącznik
  • .StreetView- Pojawia się jako ikona Pegmana, można przeciągnąć je do punktu na mapie, aby otworzyć Street View

Mapy Google - bardziej zestaw sterujący

Oprócz wyżej domyślny zestaw sterowania pomocną także:

  • .Scale- Wyświetlania mapy Skala
  • .Rotate- Wyświetla mały obwód ikonę, można obrócić mapę
  • .verview Mapa- w widoku z perspektywy mapy rozległej

Podczas tworzenia mapy można określić zestaw sterowania jest wyświetlany przez ustawienie opcji lub dzwoniąc setOptions (), aby zmienić mapę opcje ustawień.


Mapy Google - Wyłącz domyślny zestaw kontrolny

Możesz wyłączyć domyślny zestaw kontroli.

Aby wyłączyć domyślny zestaw kontrolny, należy ustawić właściwość mapować disableDefaultUI prawdziwe:

Przykłady

disableDefaultUI:true

Spróbuj »


Mapy Google - wszystkie regulatory ustawione, aby otworzyć

Niektóre kontrole ustawić wyświetlanie domyślnej na mapie, podczas gdy inne nie będzie, chyba że je ustawić.

Ustaw regulator aby był on widoczny prawda - Ustaw regulator na false, aby ją ukryć.

Poniższe przykłady są otwarte wszystkie kontrole:

Przykłady

panControl:true,
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true

Spróbuj »


Mapy Google - zmodyfikować zestaw kontrolny

Niektóre kontrole mapy są konfigurowalne. Zmiana kontroli określonych przez rozwijanie pola opcji sterowania.

F Na przykład, aby zmienić opcję sterowania zoomem określa zoomControlOptions. zoomControlOptions zawiera trzy następujące opcje:

  • .google.maps.ZoomControlStyle.SMALL- wyświetlacz zminimalizować kontrolę zoomu
  • .google.maps.ZoomControlStyle.LARGE- zoom standardowy pokaz slajdów kontrole
  • .google.maps.ZoomControlStyle.DEFAULT- wyposażenie i wielkość mapowych, wybrać najbardziej odpowiednią kontrolę

Przykłady

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

Spróbuj »

Uwaga: Jeśli chceszzmodyfikować kontrolę, najpierw kontrolę obrotu (ustaw ją na true).

Kolejna kontrola to kontrola MapType.

może pojawić MapType kontrola w jednej z następujących opcji w stylu:

  • google.maps.MapTypeControlStyle.HORIZONTAL_BAR, w poziomym pasku pojawi się jako zestaw przycisków sterujących, jak pokazano w Mapach Google.
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU, do wyświetlania pojedynczego przycisku sterowania, dzięki czemu można wybrać typ mapy z menu rozwijanego.
  • google.maps.MapTypeControlStyle.DEFAULT, do wyświetlania "default" zachowanie, która zależy od wielkości ekranu i mogą ulec zmianie w przyszłych wersjach API.

Przykłady

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

Spróbuj »

Podobnie, można użyć właściwości location ControlPosition określoną kontrolę:

Przykłady

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

Spróbuj »


Mapy Google - set kontroli niestandardowych

Tworzenie niestandardowego formantu, aby powrócić do Londynu na imprezę kliknij: (Jeśli mapa jest przeciągany):

Przykłady

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);

Spróbuj »


Mapy Google - zestaw kontrolny Reference Manual

Google Maps API Reference ręczne .