penutup

Ikhtisar tindanan peta

Semua kandungan yang ditindih atau ditindih pada peta secara kolektif dirujuk sebagai tindanan peta. Seperti anotasi, elemen grafik vektor (termasuk garis poligon, poligon dan bulatan), tetingkap maklumat, dsb. Tindanan mempunyai koordinat geografinya sendiri dan apabila anda menyeret atau mengezum peta, ia bergerak dengan sewajarnya.

API peta menyediakan jenis tindanan berikut:

Tindan: Kelas asas abstrak tindanan, dan semua tindanan mewarisi kaedah kelas ini.

Penanda: Penanda mewakili titik pada peta dan ikon tanda boleh disesuaikan.

Label: Mewakili label teks pada peta Anda boleh menyesuaikan kandungan teks label.

Polyline: mewakili polyline pada peta.

Polygon: Mewakili poligon pada peta. Poligon adalah serupa dengan garis poli tertutup, tetapi anda juga boleh menambah warna isian padanya.

Bulatan: Mewakili bulatan pada peta.

InfoWindow: Tetingkap maklumat juga merupakan tindanan khas yang boleh memaparkan teks dan maklumat multimedia yang lebih kaya. Nota: Hanya satu tetingkap maklumat boleh dibuka pada peta pada masa yang sama.

Anda boleh menggunakan kaedah map.addOverlay untuk menambah tindanan pada peta dan kaedah map.removeOverlay untuk mengalih keluar tindanan Ambil perhatian bahawa kaedah ini tidak digunakan pada InfoWindow.

Label

Label mewakili titik pada peta. API menyediakan gaya ikon lalai, dan anda juga boleh menentukan ikon tersuai melalui kelas Ikon. Parameter pembina Marker ialah Point dan MarkerOptions (pilihan). Nota: Apabila anda menggunakan ikon tersuai, titik koordinat geografi label akan terletak di tengah ikon yang digunakan untuk pelabelan Anda boleh mengubah suai kedudukan penentukuran melalui sifat mengimbangi Ikon.

Contoh di bawah menambah label pada titik tengah peta dan menggunakan gaya label lalai.

var map = new BMap.Map("container");    
var point = new BMap.Point(116.404, 39.915);    
map.centerAndZoom(point, 15);    
var marker = new BMap.Marker(point);        // 创建标注    
map.addOverlay(marker);                     // 将标注添加到地图中

Tentukan ikon tanda

Ikon tanda tersuai boleh dilaksanakan melalui kelas Ikon Contoh berikut ditetapkan melalui atribut ikon parameter MarkerOptions Anda juga boleh menggunakan penanda. kaedah setIcon().

var map = new BMap.Map("container");    
var point = new BMap.Point(116.404, 39.915);    
map.centerAndZoom(point, 15);  // 编写自定义函数，创建标注   
function addMarker(point, index){  // 创建图标对象   
var myIcon = new BMap.Icon("markers.png", new BMap.Size(23, 25), {    
// 指定定位位置。   
// 当标注显示在地图上时，其所指向的地理位置距离图标左上    
// 角各偏移10像素和25像素。您可以看到在本例中该位置即是   
   // 图标中央下端的尖角位置。    
   offset: new BMap.Size(10, 25),    
   // 设置图片偏移。   
   // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您   
   // 需要指定大图的偏移位置，此做法与css sprites技术类似。    
   imageOffset: new BMap.Size(0, 0 - index * 25)   // 设置图片偏移    
 });      
// 创建标注对象并添加到地图   
 var marker = new BMap.Marker(point, {icon: myIcon});    
 map.addOverlay(marker);    
}    
// 随机向地图添加10个标注    
var bounds = map.getBounds();    
var lngSpan = bounds.maxX - bounds.minX;    
var latSpan = bounds.maxY - bounds.minY;    
for (var i = 0; i < 10; i ++) {    
 var point = new BMap.Point(bounds.minX + lngSpan * (Math.random() * 0.7 + 0.15),    
                            bounds.minY + latSpan * (Math.random() * 0.7 + 0.15));    
 addMarker(point, i);    
}

Mendengar melabel acara

Kaedah acara adalah sama seperti mekanisme acara Peta. Sila rujuk bahagian acara.

marker.addEventListener("click", function(){    
 alert("您点击了标注");    });

Anotasi boleh seret

Kaedah enableDragging dan disableDragging penanda boleh digunakan untuk menghidupkan dan mematikan fungsi seret anotasi. Secara lalai, penanda tidak menyokong penyeretan Anda perlu memanggil kaedah marker.enableDragging() untuk mendayakan fungsi menyeret. Selepas fungsi penyeretan didayakan untuk anotasi, anda boleh mendengar peristiwa dragend anotasi untuk menangkap kedudukan terkini anotasi selepas menyeret.

marker.enableDragging();    
marker.addEventListener("dragend", function(e){    
 alert("当前位置：" + e.point.lng + ", " + e.point.lat);    
})

Memory Release

Dalam API versi 1.0, jika anda perlu berulang kali menambah sejumlah besar label pada peta, ini mungkin menduduki lebih banyak sumber memori. Jika anotasi anda tidak lagi digunakan selepas dialih keluar, anda boleh memanggil kaedah Overlay.dispose() untuk mengosongkan memori. Ambil perhatian bahawa dalam versi 1.0, label tidak akan ditambahkan pada peta lagi selepas memanggil kaedah ini. Bermula dari versi 1.1, anda tidak perlu lagi menggunakan kaedah ini untuk melepaskan sumber memori, API secara automatik akan membantu anda menyelesaikan kerja ini.

Sebagai contoh, anda boleh memanggil kaedah ini selepas anotasi telah dialih keluar:

map.removeOverlay(marker);    
marker.dispose(); // 1.1 版本不需要这样调用

Tetingkap Maklumat

Tetingkap Maklumat memaparkan kandungan HTML dalam kedudukan terapung di atas peta. Tetingkap maklumat boleh dibuka terus di mana-mana lokasi pada peta, atau ia boleh dibuka pada objek label (dalam kes ini, koordinat tetingkap maklumat adalah konsisten dengan koordinat label). Anda boleh menggunakan InfoWindow untuk membuat contoh tetingkap maklumat Ambil perhatian bahawa hanya satu tetingkap maklumat boleh dibuka pada peta pada masa yang sama.

var opts = {    
 width : 250,     // 信息窗口宽度    
 height: 100,     // 信息窗口高度    
 title : "Hello"  // 信息窗口标题   
}    
var infoWindow = new BMap.InfoWindow("World", opts);  // 创建信息窗口对象    
map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口

Polyline

Polyline mewakili tindanan polyline pada peta. Ia terdiri daripada satu set titik dan menghubungkan titik-titik ini untuk membentuk polyline.

Tambah Polyline

Polylines dilukis pada peta sebagai satu siri segmen lurus. Warna, ketebalan dan ketelusan segmen ini boleh disesuaikan. Warna boleh menjadi nombor perenambelasan (contohnya: #ff0000) atau kata kunci warna (contohnya: merah).

Lukisan poligaris memerlukan pelayar untuk menyokong fungsi lukisan vektor. Dalam Internet Explorer, peta menggunakan VML untuk melukis polylines; dalam penyemak imbas lain gunakan SVG atau Canvas

Coretan kod berikut mencipta polyline biru lebar 6 piksel antara dua titik:

Tindan tersuai

API menyokong tindanan yang ditentukan pengguna sejak versi 1.1.

Untuk membuat tindanan tersuai, anda perlu melakukan perkara berikut:

1 Tentukan pembina tindanan tersuai dan hantar beberapa pembolehubah bebas melalui parameter pembina.

2. Tetapkan atribut prototaip objek tindanan tersuai kepada contoh Tindanan supaya ia boleh mewarisi kelas asas tindanan.

3. Laksanakan kaedah permulaan Apabila kaedah map.addOverlay dipanggil, API akan memanggil kaedah ini.

4. Laksanakan kaedah cabutan.

Takrifkan pembina dan warisi Tindanan

Mula-mula anda perlu mentakrifkan pembina tindanan tersuai Dalam contoh berikut, kami mentakrifkan pembina yang dipanggil SquareOverlay, yang mengandungi dua parameter: titik tengah dan panjang sisi, Digunakan untuk mencipta satu. tindanan segi empat sama pada peta.

var polyline = new BMap.Polyline([    
   new BMap.Point(116.399, 39.910),    
   new BMap.Point(116.405, 39.920)    
 ],    
 {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}    
);    
map.addOverlay(polyline);

Memulakan tindanan tersuai

Apabila kaedah map.addOverlay dipanggil untuk menambah tindanan tersuai, API akan memanggil kaedah permulaan objek untuk memulakan tindanan, semasa proses pemulaan tindanan perlu dibuat Elemen DOM yang diperlukan oleh objek ditambah pada bekas peta yang sepadan. . Anak tetingkap

markerPane

mapPaneObjek ini mewakili elemen bekas penutup yang berbeza, dan terdapat hubungan tindanan di antara mereka Lapisan atas ialah floatPane, yang digunakan untuk memaparkan kandungan tetingkap maklumat lapisan kawasan dan tetingkap maklumat Lapisan bayangan, lapisan anotasi teks, lapisan anotasi dan lapisan grafik vektor.

Tutup segi empat tepat tersuai kami boleh ditambahkan pada mana-mana lapisan Di sini kami memilih untuk menambahkannya pada markerPane sebagai salah satu nod anaknya.

// 定义自定义覆盖物的构造函数  
function SquareOverlay(center, length, color){    
 this._center = center;    
 this._length = length;    
 this._color = color;    
}    
// 继承API的BMap.Overlay    
SquareOverlay.prototype = new BMap.Overlay();

Setakat ini kami hanya menambah tindanan pada peta, tetapi tidak meletakkannya di lokasi yang betul. Anda perlu menetapkan kedudukan tindanan dalam kaedah cabutan Apabila keadaan peta berubah (contohnya, pergerakan kedudukan, perubahan tahap), API akan memanggil kaedah cabutan tindanan untuk mengira semula kedudukan tindanan. Koordinat geografi boleh ditukar kepada koordinat piksel yang diperlukan bagi tindanan melalui kaedah map.pointToOverlayPixel.

// 实现初始化方法  
SquareOverlay.prototype.initialize = function(map){    
// 保存map对象实例   
 this._map = map;        
 // 创建div元素，作为自定义覆盖物的容器   
 var div = document.createElement("div");    
 div.style.position = "absolute";        
 // 可以根据参数设置元素外观   
 div.style.width = this._length + "px";    
 div.style.height = this._length + "px";    
 div.style.background = this._color;      
// 将div添加到覆盖物容器中   
 map.getPanes().markerPane.appendChild(div);      
// 保存div实例   
 this._div = div;      
// 需要将div元素作为方法的返回值，当调用该覆盖物的show、   
// hide方法，或者对覆盖物进行移除时，API都将操作此元素。   
 return div;

Alih keluar tindanan

Apabila kaedah map.removeOverlay atau map.clearOverlays dipanggil, API secara automatik akan mengalih keluar elemen DOM yang dikembalikan melalui kaedah permulaan.

Menunjukkan dan menyembunyikan tindanan

Tindanan tersuai secara automatik akan mewarisi kaedah tunjukkan dan sembunyikan Tindanan, yang akan mengubah suai atribut style.display elemen DOM yang dikembalikan oleh kaedah permulaan. Jika elemen tindanan tersuai adalah lebih kompleks, anda juga boleh melaksanakan kaedah pertunjukan dan sembunyikan sendiri.

// 实现绘制方法   
SquareOverlay.prototype.draw = function(){    
// 根据地理坐标转换为像素坐标，并设置给容器    
 var position = this._map.pointToOverlayPixel(this._center);    
 this._div.style.left = position.x - this._length / 2 + "px";    
 this._div.style.top = position.y - this._length / 2 + "px";    
}

Sesuaikan kaedah lain Melalui atribut prototaip pembina, anda boleh menambah sebarang kaedah tersuai Contohnya, kaedah berikut boleh menukar keadaan paparan tindanan setiap kali ia dipanggil:

// 实现显示方法    
SquareOverlay.prototype.show = function(){    
 if (this._div){    
   this._div.style.display = "";    
 }    
}      
// 实现隐藏方法  
SquareOverlay.prototype.hide = function(){    
 if (this._div){    
   this._div.style.display = "none";    
 }    
}

Tambah tindanan

Anda adalah. kini dilakukan Tindanan tersuai lengkap telah ditulis dan boleh ditambah pada peta.

// 添加自定义方法   
SquareOverlay.prototype.toggle = function(){    
 if (this._div){    
   if (this._div.style.display == ""){    
     this.hide();    
   }    
   else {    
     this.show();    
   }    
 }    
}