Kawalan Peta Google

Peta Google - kawalan lalai

Ketika memaparkan peta Google standar, ia menyediakan set kawalan lalai:

• Pembesaran (Zoom) - paparkan tali penyeimbang atau butang "+/-" untuk mengawal tahap pembesaran peta
• Pindah (Pan) - paparkan kawalan pindah untuk memindahkan peta
• Jenis Peta (MapType) - membolehkan pengguna mengalihkan jenis peta (peta jalan dan peta satelit)
• Tunjukan Latar Belakang Jalan (Street View) - paparkan ikon pegman jalan, boleh diaruh di atas peta untuk membolehkan tunjuk latar belakang jalan

Peta Google - kawalan lebih banyak

Di samping kawalan lalai, Peta Google juga menyediakan:

• Skala (Scale) - paparkan elemen skala peta
• Putar (Rotate) - paparkan ikon bulatan kecil, membolehkan anda putar peta
• Peta Ringkasan (Overview Map) - paparkan peta ringkasan, merefleksikan kawasan yang lebar dalam pemandangan peta semasa

anda boleh tentukan kawalan yang akan dipaparkan semasa membuat peta (dalam MapOptions) atau mengubah pilihan peta melalui panggilan setOptions().

Peta Google - lumpuhkan kawalan lalai

anda mungkin mahu menutup kawalan lalai.

Untuk ini, tetapkan atribut disableDefaultUI peta (dalam objek pilihan peta) kepada true:

实例

var mapOptions {disableDefaultUI: true}

Peta Google - buka semua kawalan

beberapa kawalan akan muncul secara lalai di atas peta; manakala yang lain tidak akan muncul kecuali anda menetapkannya.

sila tentukan objek pilihan peta untuk menambah atau menghapus kawalan daripada peta.

menetapkan kawalan kepada true akan membolehkan ia kelihatan - menetapkan kawalan kepada false akan menyembunyikannya.

contoh ini membuka semua kawalan:

实例

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
}