Kawalan

Ikhtisar Kawalan Peta

Elemen UI pada Peta Baidu yang bertanggungjawab untuk berinteraksi dengan peta dipanggil kawalan. API Peta Baidu menyediakan banyak kawalan, dan anda juga boleh melaksanakan kawalan tersuai melalui kelas Kawalan.

Kawalan yang disediakan dalam API peta ialah:

Kawalan: kelas asas abstrak kawalan Semua kawalan mewarisi kaedah dan sifat kelas ini. Kelas ini membolehkan anda melaksanakan kawalan tersuai.

NavigationControl: Peta pan dan kawalan zum, yang terletak di sudut kiri atas peta secara lalai pada PC Ia termasuk fungsi mengawal kuali dan zum peta. Versi mudah alih menyediakan kawalan zum, yang terletak di bahagian bawah sebelah kanan peta secara lalai.

OverviewMapControl: Kawalan peta lakaran kenit, terletak di bahagian bawah sebelah kanan peta secara lalai, ialah peta lakaran kecil boleh lipat.

ScaleControl: Scale control, terletak di bahagian bawah sebelah kiri peta secara lalai, memaparkan hubungan skala peta.

MapTypeControl: Kawalan jenis peta, terletak di penjuru kanan sebelah atas peta secara lalai.

Kawalan Hak Cipta: Kawalan Hak Cipta, terletak di bahagian bawah sebelah kiri peta secara lalai.

GeolocationControl: Kawalan kedudukan, dibangunkan untuk terminal mudah alih, terletak di bahagian bawah sebelah kiri peta secara lalai.

Tambah kawalan pada peta

Anda boleh menggunakan kaedah Map.addControl() untuk menambah kawalan pada peta. Peta perlu dimulakan sebelum ini. Contohnya, untuk menambahkan kawalan peta standard pada peta anda, tambahkan yang berikut pada kod anda:

var map = new BMap.Map("container");    
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);    
map.addControl(new BMap.NavigationControl());

Anda boleh menambah berbilang kawalan pada peta anda. Dalam contoh ini, kami menambah kawalan sorot dan zum, kawalan skala dan kawalan lakaran kenit pada peta. Sebaik sahaja kawalan ditambahkan pada peta, ia berkuat kuasa serta-merta.

map.addControl(new BMap.NavigationControl());    
map.addControl(new BMap.ScaleControl());    
map.addControl(new BMap.OverviewMapControl());    
map.addControl(new BMap.MapTypeControl());    
map.setCurrentCity("北京"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用

Kawal kedudukan kawalan

Apabila memulakan kawalan, anda boleh menyediakan parameter pilihan, di mana sifat penambat dan mengimbangi bersama-sama mengawal kedudukan kawalan pada peta.

Kawal kedudukan dok Sauh mewakili kedudukan dok kawalan, iaitu, sudut mana pada peta kawalan itu dilabuhkan. Apabila saiz peta berubah, kawalan akan melaraskan kedudukannya mengikut lokasi dok. Nilai yang dibenarkan untuk sauh ialah:

BMAP_ANCHOR_TOP_LEFT bermaksud kawalan diletakkan di penjuru kiri sebelah atas peta.

BMAP_ANCHOR_TOP_RIGHT bermaksud kawalan diletakkan di sudut kanan atas peta.

BMAP_ANCHOR_BOTTOM_LEFT bermaksud kawalan diletakkan di sudut kiri bawah peta.

BMAP_ANCHOR_BOTTOM_RIGHT bermaksud kawalan diletakkan di penjuru kanan sebelah bawah peta.

Kedudukan kawalan mengimbangi

Selain menentukan kedudukan dok, ofset juga boleh digunakan untuk menunjukkan bilangan piksel kawalan dari sempadan peta. Jika kedudukan dok dua kawalan adalah sama, kawalan mungkin bertindih Dalam kes ini, nilai offset boleh digunakan untuk memaparkan kedua-dua kawalan secara berasingan.

Contoh ini meletakkan bar skala di penjuru kiri sebelah bawah peta Memandangkan API akan mempunyai maklumat hak cipta secara lalai, beberapa nilai mengimbangi perlu ditambah untuk mengelakkan kawalan daripada bertindih.

var opts = {offset: new BMap.Size(150, 5)}    
map.addControl(new BMap.ScaleControl(opts));

Ubah suai konfigurasi kawalan

Kawalan API peta menyediakan banyak parameter konfigurasi Anda boleh merujuk kepada dokumentasi API untuk mengubah suainya untuk mendapatkan penampilan kawalan yang memenuhi keperluan anda. Contohnya, kawalan NavigationControl menyediakan jenis berikut:

BMAP_NAVIGATION_CONTROL_LARGE bermaksud untuk memaparkan kawalan pan dan zum yang lengkap.

BMAP_NAVIGATION_CONTROL_SMALL bermaksud memaparkan kuali kecil dan kawalan zum.

BMAP_NAVIGATION_CONTROL_PAN bermakna hanya fungsi pan bagi kawalan dipaparkan.

BMAP_NAVIGATION_CONTROL_ZOOM bermakna hanya bahagian zum kawalan dipaparkan.

Gambar di bawah menunjukkan rupa jenis kawalan yang berbeza di atas dari kiri ke kanan:

4 yang pertama dalam gambar di atas ialah gaya kawalan kuali dan zum pada bahagian PC, dan yang terakhir ialah gaya kawalan zum pada bahagian mudah alih.

Contoh di bawah akan melaraskan penampilan kuali dan kawalan peta zum.

var opts = {type: BMAP_NAVIGATION_CONTROL_SMALL}    
map.addControl(new BMap.NavigationControl(opts));

Kawalan tersuai

API Peta Baidu membolehkan anda membuat kawalan peta tersuai dengan mewarisi Kawalan.

Untuk mencipta kawalan tersuai yang boleh digunakan, anda perlu melakukan perkara berikut:

1. Tentukan pembina untuk kawalan tersuai. 2. Tetapkan atribut prototaip pembina kawalan tersuai kepada contoh Kawalan supaya ia boleh mewarisi kelas asas kawalan. 3. Laksanakan kaedah initialize() dan sediakan sifat defaultAnchor dan defaultOffset.

Tentukan pembina dan warisi Kawalan

Mula-mula anda perlu mentakrifkan pembina kawalan tersuai dan menyediakan dua sifat, defaultAnchor dan defaultOffset, dalam pembina supaya API boleh meletakkan kawalan dengan betul, dan kemudian biarkan ia mewarisi daripada Kawalan. Dalam contoh berikut kami mentakrifkan kawalan bernama ZoomControl, yang akan mengezum masuk pada peta sebanyak dua tahap setiap kali ia diklik. Ia mempunyai logo teks dan bukannya ikon grafik yang digunakan dalam kuali dan kawalan zum.

// 定义一个控件类，即function    
function ZoomControl(){    
    // 设置默认停靠位置和偏移量  
    this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;    
    this.defaultOffset = new BMap.Size(10, 10);    
}    
// 通过JavaScript的prototype属性继承于BMap.Control   
ZoomControl.prototype = new BMap.Control();

Memulakan kawalan tersuai

Apabila kaedah map.addControl() dipanggil untuk menambah kawalan tersuai, API akan memanggil kaedah initialize() objek untuk memulakan kawalan yang anda perlukan untuk melaksanakan kaedah ini dan Cipta elemen DOM yang diperlukan untuk kawalan di dalamnya dan tambah acara DOM. Semua elemen DOM dalam kawalan tersuai akhirnya harus ditambahkan pada bekas peta (iaitu, elemen DOM di mana peta terletak Bekas peta boleh diperoleh melalui kaedah map.getContainer(). Akhir sekali, kaedah initialize() perlu mengembalikan elemen DOM bagi bekas kawalan.

// 自定义控件必须实现initialize方法，并且将控件的DOM元素返回   
// 在本方法中创建个div元素作为控件的容器，并将其添加到地图容器中   
ZoomControl.prototype.initialize = function(map){    
// 创建一个DOM元素   
 var div = document.createElement("div");    
// 添加文字说明    
 div.appendChild(document.createTextNode("放大2级"));    
 // 设置样式    
 div.style.cursor = "pointer";    
 div.style.border = "1px solid gray";    
 div.style.backgroundColor = "white";    
 // 绑定事件，点击一次放大两级    
 div.onclick = function(e){  
  map.zoomTo(map.getZoom() + 2);    
 }    
 // 添加DOM元素到地图中   
 map.getContainer().appendChild(div);    
 // 将DOM元素返回  
 return div;    
 }

Tambah kawalan tersuai

// 创建控件实例    var myZoomCtrl = new ZoomControl();