Control ng Google Maps

Google Maps - Default na kontrol

Kapag ipinapakita ang standard na Google Maps, ito ay nagbibigay ng default na set ng kontrol:

  • Pagpapalaki (Zoom) - Magpakita ng slider o "+/-" na pindutan upang kontrolin ang antas ng pagpapalaki ng mapa
  • Pagsasilip (Pan) - Magpakita ng kontrol na nagbibigay-daan sa pagsasilip ng mapa
  • Uri ng Mapa (MapType) - Nagbibigay-daan sa gumagamit na magpalit sa pagitan ng uri ng mapa (mapa na may daan at satelayt)
  • Street View (Tindig sa Kalye) - Magpakita ng isang maliit na tao na ikon (Pegman icon), na maaring ilihis sa mapa upang i-on ang Street View

Google Maps - Higit pang kontrol

Hindi lamang ang mga default na kontrol, ang Google Maps ay nagbibigay din ng:

  • Porsiyon (Scale) - Magpakita ng elemento ng porsiyon ng mapa
  • Pagsasayaw (Rotate) - Magpakita ng isang maliliit na pabilog na ikon, na nagbibigay-daan sa iyo na i-rotate ang mapa
  • Mapa na may Pansin (Overview Map) - Magpakita ng isang maliliit na pabilog na ikon, na nagbibigay-daan sa iyo na i-rotate ang mapa

Maaari mong itakda kung anong kontrol ang magpapakita sa paglikha ng mapa (sa loob ng MapOptions) o sa pamamagitan ng pagtawag sa setOptions() upang baguhin ang opsyon ng mapa.

Google Maps - I-off ang default na kontrol

Maaaring gusto mo na i-off ang mga default na kontrol.

Para dito, ilagay ang katangian ng disableDefaultUI ng mapa (sa loob ng objekto ng opsyon ng mapa) sa true:

实例

var mapOptions {disableDefaultUI: true}

Google Maps - Buksan ang lahat ng kontrol

Ang ilan sa mga kontrol ay magpapakita sa mapa nang walang pagtatakbo, maliban kung iyong i-set na.

Mangyaring magbigay ng kung anong kontrol ang ilalagay o alisin sa objekto ng opsyon ng mapa.

Ang pagtatakbo ng kontrol sa true ay magiging nakikita - ang pagtatakbo ng kontrol sa false ay magiging nakahiding.

Ang eksemplo na ito ay binuksan ang lahat ng mga kontrol:

实例

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

谷歌地图 - 修改控件

一些地图控件是可配置的。

可以通过规定控件的选项字段来修改控件。

例如,在 zoomControlOptions 字段中规定了用于修改 Zoom 控件的选项。zoomControlOptions 字段可能包含:

  • google.maps.ZoomControlStyle.SMALL - 显示迷你缩放控件(仅 + 和 - 按钮)
  • google.maps.ZoomControlStyle.LARGE - 显示标准缩放滑块控件
  • google.maps.ZoomControlStyle.DEFAULT - 根据设备和地图大小选择最佳缩放控件

实例

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

注意:如果要修改控件,请首先启用该控件(将其设置为 true)。

另一个可配置的控件是 MapType 控件。

mapTypeControlOptions 字段中规定了用于修改控件的选项。mapTypeControlOptions 字段可能包含:

  • google.maps.MapTypeControlStyle.HORIZONTAL_BAR - 为每种地图类型显示一个按钮
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU - 通过下拉菜单选择地图类型
  • google.maps.MapTypeControlStyle.DEFAULT - 显示“默认”行为(取决于屏幕尺寸)

实例

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

您还可以使用 ControlPosition 属性来定位控件:

实例

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