Cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi pan peta-tutorial js-php.cn

Cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi pan peta

PHPz

Lepaskan： 2023-11-21 10:00:35

asal

1403 orang telah melayarinya

Cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi pan peta

Cara menggunakan JS dan Baidu Map untuk melaksanakan fungsi map pan

Baidu Map ialah platform perkhidmatan peta yang digunakan secara meluas, yang sering digunakan dalam pembangunan web untuk memaparkan maklumat geografi, kedudukan dan fungsi lain. Artikel ini akan memperkenalkan cara menggunakan API Peta JS dan Baidu untuk melaksanakan fungsi pan peta dan memberikan contoh kod khusus.

1. Persediaan
Sebelum menggunakan API Peta Baidu, anda perlu memohon akaun pembangun pada Platform Terbuka Peta Baidu (http://lbsyun.baidu.com/) dan buat aplikasi. Selepas penciptaan selesai, anda akan mendapat AK (Kunci Akses) anda sendiri, yang akan digunakan sebagai identiti untuk setiap permintaan. .

3. Cipta bekas peta
Buat elemen bekas dalam fail HTML untuk memaparkan peta. Anda boleh menetapkan id kepada bekas ini supaya bekas itu boleh diperolehi melalui id dalam kod berikut. Kodnya adalah seperti berikut:

<head>
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yourAK"></script>
</head>

Salin selepas log masuk

4 Mulakan peta

Inisialisasikan objek peta dalam fail JS, kodnya adalah seperti berikut:

<div id="mapContainer" style="width: 100%; height: 500px;"></div>

Salin selepas log masuk

Ganti mapContainer dalam kod dengan id bekas peta yang anda buat.

5. Tetapkan titik tengah peta
Tetapkan titik tengah awal peta adalah seperti berikut:

var map = new BMap.Map("mapContainer");

Salin selepas log masuk

Antaranya, 116.404 ialah longitud dan 39.915 ialah koordinat di sini titik mengikut keperluan sebenar.

6. Laksanakan fungsi pan peta
Seterusnya, kita perlu menambah dua butang pada halaman untuk mencetuskan operasi pan peta. Kodnya adalah seperti berikut:

var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);

Salin selepas log masuk

Kemudian, laksanakan logik fungsi pan dalam fail JS, kodnya adalah seperti berikut:

<button onclick="panLeft()">向左移动</button>
<button onclick="panRight()">向右移动</button>

Salin selepas log masuk

Di sini, fungsi panLeft() digunakan untuk menyorot peta ke kiri, dan fungsi panRight() digunakan untuk menyorot peta ke kanan. Dalam kod tersebut, koordinat titik tengah peta semasa diperolehi melalui kaedah map.getCenter(), kemudian koordinat baharu newCenter dicipta dan titik tengah peta dipindahkan ke koordinat baharu melalui map.panTo( ) kaedah.

7. Tingkatkan paparan peta

Akhir sekali, kita perlu memanggil kaedah map.enableScrollWheelZoom() dalam fail JS untuk menyokong fungsi zum roda. Kodnya adalah seperti berikut:

function panLeft() {
  var mapCenter = map.getCenter();
  var newCenter = new BMap.Point(mapCenter.lng - 0.1, mapCenter.lat);
  map.panTo(newCenter);
}

function panRight() {
  var mapCenter = map.getCenter();
  var newCenter = new BMap.Point(mapCenter.lng + 0.1, mapCenter.lat);
  map.panTo(newCenter);
}

Salin selepas log masuk

8. Contoh kod

Berikut ialah contoh kod lengkap:

map.enableScrollWheelZoom(true);

Salin selepas log masuk

Simpan kod di atas sebagai fail HTML, dan kemudian buka fail dalam penyemak imbas, anda akan melihat fungsi pan peta Halaman paparan peta. Klik butang tindakan dan peta akan menyorot kiri atau kanan dengan sewajarnya.

Ringkasan
Artikel ini memperkenalkan cara menggunakan JS dan API Peta Baidu untuk melaksanakan fungsi pan peta dan menyediakan contoh kod khusus. Melalui kod sampel ini, anda boleh mula menggunakan API Peta Baidu dengan cepat dan melaksanakan fungsi pan peta untuk memenuhi keperluan anda sendiri.

Atas ialah kandungan terperinci Cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi pan peta. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!