Bagaimana untuk memaparkan peta pada halaman web menggunakan Peta JS dan Baidu

Tetapkan gaya bekas peta dalam fail CSS:

#map { width: 800px; height: 500px; }

3

Dalam Buat objek peta dalam fail JS dan nyatakan tahap zum lalai dan lokasi titik tengahnya. Kodnya adalah seperti berikut:

var map = new BMap.Map("map"); var point = new BMap.Point(116.404, 39.915); //中心点位置 map.centerAndZoom(point, 12); //设置地图中心点和默认的缩放级别

BMap di sini ialah objek yang disediakan oleh Baidu Map API, yang melaluinya peta dan pelbagai komponen fungsi peta boleh dibuat.

4. Tambahkan kawalan peta

Tambahkan beberapa kawalan yang biasa digunakan pada Peta Baidu, seperti kawalan zum, kawalan jenis peta, kawalan mata helang, dsb. Kodnya adalah seperti berikut:

map.addControl(new BMap.NavigationControl()); //添加平移缩放控件 map.addControl(new BMap.ScaleControl()); //添加比例尺控件 map.addControl(new BMap.OverviewMapControl()); //添加鹰眼控件 map.addControl(new BMap.MapTypeControl()); //添加地图类型控件

5. Tambah tindanan dan label

Menambah tindanan dan label tersuai pada peta boleh dicapai melalui objek berkaitan BMap. Contohnya, tambahkan anotasi tersuai:

var marker = new BMap.Marker(point); //创建一个标注 map.addOverlay(marker); //将标注添加到地图中

6. Ikat peristiwa peta

Apabila menggunakan peta, anda selalunya perlu mengikat beberapa peristiwa untuk bertindak balas kepada operasi pengguna. Sebagai contoh, apabila pengguna mengklik pada peta, label ditambahkan pada peta. Kodnya adalah seperti berikut:

map.addEventListener("click", function(e) { var marker = new BMap.Marker(e.point); //创建一个标注 map.addOverlay(marker); //将标注添加到地图中 });

7. Geocoding dan reverse geocoding

Geocoding dan reverse geocoding adalah fungsi penting dalam API peta. Geocoding ialah proses menukar alamat teks kepada koordinat geografi, manakala geocoding terbalik ialah proses menukar koordinat geografi kepada alamat teks. Contoh kod adalah seperti berikut:

//地理编码 var geocoder = new BMap.Geocoder(); geocoder.getPoint("北京市海淀区中关村", function(point) { //在地图上添加一个标注 var marker = new BMap.Marker(point); map.addOverlay(marker); }, "北京市"); //逆地理编码 var geoc = new BMap.Geocoder(); geoc.getLocation(point, function(rs) { var addComp = rs.addressComponents; alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street); });

Di atas adalah proses asas dan pelaksanaan fungsi biasa menggunakan Peta JS dan Baidu untuk memaparkan peta pada halaman web. Melalui contoh kod ini, saya percaya pembaca boleh menguasai penggunaan API Peta Baidu dengan cepat, dan kemudian membangunkan aplikasi peta yang lebih kaya dan praktikal.

Atas ialah kandungan terperinci Bagaimana untuk memaparkan peta pada halaman web menggunakan Peta JS dan Baidu. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!