Cara menggunakan kemahiran api_javascript peta Baidu

Jika anda ingin menggunakan API Peta Baidu, anda perlu mendapatkan kunci API Peta Baidu dahulu, dan kemudian memperkenalkan API Peta Baidu Seterusnya, kami akan memperkenalkan secara terperinci teknik untuk mendapatkan dan memperkenalkan kunci API, dan memberikan anda kod Untuk penjelasan terperinci tentang cara menggunakan API Peta Baidu, sila lihat di bawah.

Pertama sekali, jika anda ingin memanggil API Peta Baidu, anda perlu mendapatkan kunci API Peta Baidu.

Memohon kunci adalah sangat mudah. ​​Terdapat pautan yang berkaitan pada halaman utama API Peta Baidu Isikan maklumat yang berkaitan dan Baidu akan memberi anda kunci.

Langkah seterusnya ialah memperkenalkan API Peta Baidu

Kod kunci adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

Seterusnya kita boleh membuat peta dan mencubanya. (Kod Js)

Salin kod Kod adalah seperti berikut:

var map = new BMap.Map("container"); // Cipta contoh peta
var point = new BMap.Point(120.391655,36.067588); // Cipta koordinat titik
map.centerAndZoom(titik, 15);
//map.centerAndZoom("Beijing", 15);
//map.centerAndZoom("Hongkong", 15);
                                            

Tiga perkara perlu dijelaskan di sini:
Kaedah 1.map.centerAndZoom mencipta peta Parameter pertama boleh membuat peta berdasarkan titik yang dibuat sebelum ini sebagai pusat, atau membuat peta berdasarkan nama Cina kawasan bandar. (Jika dieja dengan betul, ia boleh dibuat berdasarkan nama Inggeris bandar itu)

2. Parameter kedua map.centerAndZoom ialah tahap zum peta, maksimum ialah 19 dan minimum ialah 0. (Tapi sebenarnya bila dikurangkan kepada 3...)

3. Kaedah BMap.Map memerlukan bekas semasa membuat peta (peta akan melaraskan secara automatik mengikut saiz bekas.), isikan id bekas yang berkaitan.

Mengenai saiz peta:

Boleh lulus

Salin kod Kod adalah seperti berikut:

map.setZoom();

Kaedah mengawal tahap saiz peta secara aktif.

Anda juga boleh menetapkannya

Salin kod Kod adalah seperti berikut:

map.enableScrollWheelZoom(true);

Gunakan roda tetikus untuk mengawal saiz.

Peta Baidu menyediakan ruang berfungsi yang sangat kaya untuk kami gunakan.

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

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

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

4.ScaleControl: Kawalan skala, yang terletak di bahagian bawah sebelah kiri peta secara lalai, memaparkan hubungan skala peta.

5.MapTypeControl: Kawalan jenis peta, terletak di penjuru kanan sebelah atas peta secara lalai (peta, satelit, 3D).

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

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

Perenderan

Salin kod Kod adalah seperti berikut:

map.addControl(BMap.NavigationControl() baharu);//Zum dan kawalan sorot

map.addControl(BMap.ScaleControl()); //Skala
map.addControl(BMap.OverviewMapControl() baharu;//Thumbnail
map.addControl(BMap.MapTypeControl()); //Jenis peta
map.setCurrentCity("Qingdao");


Hinweis: Die Umschaltfunktion von MapTypeControl ist nur verfügbar, wenn Stadtinformationen eingestellt sind

Kartenereignis:
Die meisten Objekte in der Baidu Map API enthalten die Methode addEventListener, mit der wir Objektereignisse abhören können.
Beispiel:

Code kopieren Der Code lautet wie folgt:

map.addEventListener("click", function(){ 
Alert("Sie haben auf die Karte geklickt."); });

Wenn wir keine Ereignisse mehr abhören möchten, können wir den Ereignis-Listener entfernen. Jedes API-Objekt stellt „removeEventListener“ bereit, um Ereignisüberwachungsfunktionen zu entfernen.

Code kopieren Der Code lautet wie folgt:

map.removeEventListener("click", functionA);
map.addEventListener("click", functionA);

Kartencover:
Overlay: Die abstrakte Basisklasse von Overlays erben die Methoden dieser Klasse.

Markierung: Die Markierung stellt einen Punkt auf der Karte dar und das Markierungssymbol kann angepasst werden.

Beschriftung: Stellt eine Textbeschriftung auf der Karte dar. Sie können den Textinhalt der Beschriftung anpassen.

Polylinie: Stellt eine Polylinie auf der Karte dar.

Polygon: Stellt ein Polygon auf der Karte dar. Ein Polygon ähnelt einer geschlossenen Polylinie, Sie können ihm jedoch auch eine Füllfarbe hinzufügen.

Kreis: Stellt einen Kreis auf der Karte dar.

InfoWindow: Das Informationsfenster ist auch eine spezielle Überlagerung, die umfangreichere Text- und Multimedia-Informationen anzeigen kann. Hinweis: Auf der Karte kann jeweils nur ein Informationsfenster geöffnet sein.

Anmerkungsbeispiel:

var point = new BMap.Point(120.389472,36.072362);//默认 可以通过Icon类来指定自定义图标
 var marker = new BMap.Marker(point);
 var label = new BMap.Label("青岛市政府",{offset:new BMap.Size(20,-10)});//标注标签 
 marker.setLabel(label)//设置标注说明
 marker.enableDragging();//标注可以拖动的
 marker.addEventListener("dragend", function(e){ 
  alert(e.point.lng + ", " + e.point.lat);//打印拖动结束坐标 
 }); 
 map.addOverlay(marker); 
 var point = new BMap.Point(120.387244,36.064835);
 var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25));
 var marker2 = new BMap.Marker(point, {icon: myIcon}); 
 map.addOverlay(marker2);
 var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>详细信息</p>"); //弹出窗口
 marker2.addEventListener("click", function(){
  this.openInfoWindow(infoWindow); 
 });

Die obige Beschreibung stellt den gesamten Inhalt dieses Artikels dar. Ich hoffe, dass sie für alle hilfreich ist, die die Baidu Map API verwenden.