Cara menggunakan Peta JS dan Baidu untuk menambah penanda lokasi tersuai pada peta

Cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi menambah penanda lokasi tersuai pada peta

Pengenalan: Peta Baidu ialah perkhidmatan peta yang sangat biasa digunakan, yang menyediakan pelbagai paparan peta dan fungsi interaktif, termasuk menambah tanda lokasi tersuai. Menggunakan API Peta JS dan Baidu, kami boleh melaksanakan fungsi menambah penanda lokasi tersuai dengan mudah pada peta Berikut ialah contoh kod khusus:

Langkah 1: Penyediaan

1. Pertama, import Baidu dalam fail HTML anda. fail peta adalah seperti berikut:

   <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的百度地图API密钥"></script>

2. Buat elemen div bagi bekas peta dalam halaman, nyatakan lebar dan tinggi, seperti yang ditunjukkan di bawah:

   <div id="map" style="width:800px;height:600px;"></div>

3. Tambah butang atau elemen lain yang mencetuskan acara , gunakan Untuk mencetuskan fungsi menambah penanda lokasi, seperti yang ditunjukkan di bawah:

   <button id="addMarkerBtn">添加标记</button>

Langkah 2: Tambah fungsi peta dan penanda

1. Mulakan objek peta dalam JS, seperti ditunjukkan di bawah:

   var map = new BMap.Map("map");              // 创建地图实例
   var point = new BMap.Point(116.404, 39.915); // 创建一个初始坐标点
   map.centerAndZoom(point, 15);               // 初始化地图，设置中心点和缩放级别
   map.addControl(new BMap.NavigationControl());  // 添加平移缩放控件
   map.addControl(new BMap.ScaleControl());       // 添加比例尺控件

2. Add map klik acara, Digunakan untuk mengklik pada peta untuk menambah penanda tempat, seperti yang ditunjukkan di bawah:

   map.addEventListener("click", function(e) {
    var point = e.point; // 获取点击的坐标点
    var marker = new BMap.Marker(point); // 创建新的地点标记
    map.addOverlay(marker); // 将标记添加到地图上
   });

3. Tambah acara klik butang, digunakan untuk mencetuskan peristiwa klik peta, seperti yang ditunjukkan di bawah:

   var addMarkerBtn = document.getElementById("addMarkerBtn");
   addMarkerBtn.addEventListener("click", function() {
    map.addEventListener("click", function(e) {
        var point = e.point; // 获取点击的坐标点
        var marker = new BMap.Marker(point); // 创建新的地点标记
        map.addOverlay(marker); // 将标记添加到地图上
    });
   });

Langkah 3: Uji kesan

Simpan kod di atas dan Buka fail HTML dalam penyemak imbas anda dan anda akan melihat halaman peta dengan keupayaan untuk menambah penanda lokasi tersuai. Klik mana-mana sahaja pada peta dan penanda lokasi baharu akan muncul pada peta.

Nota:

Sebelum menggunakan API Peta Baidu, anda perlu pergi ke Platform Terbuka Peta Baidu untuk memohon kunci API dan menggantikan "kunci API Peta Baidu anda" dalam kod.
• Kod di atas hanyalah contoh mudah Dalam aplikasi sebenar, gaya dan kandungan maklumat tanda lokasi perlu disesuaikan.

Ringkasan:

Melalui langkah di atas, kita boleh menggunakan API Peta JS dan Baidu untuk melaksanakan fungsi menambah penanda lokasi tersuai pada peta. Ini berguna untuk tapak web atau aplikasi yang perlu menandakan lokasi tertentu. Saya harap contoh kod dalam artikel ini dapat membantu anda!

Atas ialah kandungan terperinci Cara menggunakan Peta JS dan Baidu untuk menambah penanda lokasi tersuai pada peta. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!