Cara menggunakan JS dan Amap untuk melaksanakan fungsi navigasi lokasi

Cara menggunakan JS dan Amap untuk melaksanakan fungsi navigasi lokasi

Dengan populariti telefon pintar, navigasi peta telah menjadi salah satu fungsi yang amat diperlukan dalam kehidupan seharian. Dalam halaman web atau aplikasi mudah alih, melalui JS dan API Amap, kami boleh melaksanakan fungsi navigasi lokasi dengan mudah. Yang berikut akan memperkenalkan secara terperinci cara menggunakan API JS dan Amap untuk melaksanakan fungsi navigasi lokasi dan memberikan contoh kod.

1. Persediaan
Sebelum kita mula, kita perlu mendaftar akaun pembangun Amap dan membuat aplikasi untuk mendapatkan Kunci API. Kunci API ialah satu-satunya bukti kelayakan untuk mengakses perkhidmatan peta Amap dan boleh dihantar kepada API sebagai parameter apabila menggunakan API peta.

2. Perkenalkan API Peta Amap
Dalam fail HTML, kami perlu memperkenalkan fail JS API Peta Amap terlebih dahulu. Anda boleh memuat turun versi terkini fail API daripada tapak web pembangun Amap, atau anda boleh terus menggunakan pautan CDN yang disediakan oleh Amap.

<script src="https://webapi.amap.com/maps?v=1.4.15&key=your_api_key"></script>

Antaranya, kunci_api anda perlu diganti dengan Kunci API anda sendiri.

3. Cipta bekas peta
Dalam fail HTML, kita perlu mencipta bekas untuk memaparkan peta. Boleh menjadi elemen div atau elemen lain yang sesuai.

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

4 Mulakan objek peta
Dalam fail JS, kita perlu memulakan objek peta dan menetapkan titik tengah dan tahap zum peta.

var map = new AMap.Map('mapContainer', {
  center: [116.397428, 39.90923], // 默认中心点坐标（北京）
  zoom: 13 // 默认缩放级别
});

Di mana [116.397428, 39.90923] ialah koordinat longitud dan latitud bagi titik tengah peta, yang boleh dilaraskan mengikut keperluan.

5. Tambah Mata Penanda
Semasa menjalankan navigasi lokasi, kami biasanya mempunyai dua titik penandaan: titik permulaan dan titik akhir. Kita boleh menggunakan objek Penanda Amap untuk menambah mata penanda.

var startMarker = new AMap.Marker({
  position: [116.397428, 39.90923], // 起点坐标
  map: map, // 传入地图对象
  title: '起点' // 鼠标悬停时显示的标题
});

var endMarker = new AMap.Marker({
  position: [116.397428, 39.948691], // 终点坐标
  map: map, // 传入地图对象
  title: '终点' // 鼠标悬停时显示的标题
});

Di mana [116.397428, 39.90923] ialah koordinat titik permulaan, [116.397428, 39.948691] ialah koordinat titik akhir, yang boleh dilaraskan mengikut keperluan sebenar.

6. Lukiskan laluan navigasi
Menggunakan objek Pemanduan Amap, kita boleh melukis laluan navigasi berdasarkan koordinat titik permulaan dan penamat.

var driving = new AMap.Driving({
  map: map, // 传入地图对象
  panel: 'routePanel' // 显示导航结果的容器ID
});

driving.search(new AMap.LngLat(116.397428, 39.90923), new AMap.LngLat(116.397428, 39.948691), function (status, result) {
  if (status === 'complete') {
    // 导航路线绘制成功
  } else {
    // 导航路线绘制失败
  }
});

di mana 'routePanel' ialah ID elemen kontena yang memaparkan hasil navigasi, yang boleh ditetapkan mengikut keperluan anda.

7. Contoh kod lengkap

  
  
  <script src="https://webapi.amap.com/maps?v=1.4.15&key=your_api_key"></script>


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


  <script>
    var map = new AMap.Map('mapContainer', {
      center: [116.397428, 39.90923],
      zoom: 13
    });

    var startMarker = new AMap.Marker({
      position: [116.397428, 39.90923],
      map: map,
      title: '起点'
    });

    var endMarker = new AMap.Marker({
      position: [116.397428, 39.948691],
      map: map,
      title: '终点'
    });

    var driving = new AMap.Driving({
      map: map,
      panel: 'routePanel'
    });

    driving.search(new AMap.LngLat(116.397428, 39.90923), new AMap.LngLat(116.397428, 39.948691), function (status, result) {
      if (status === 'complete') {
        // 导航路线绘制成功
      } else {
        // 导航路线绘制失败
      }
    });
  </script>

Di atas ialah cara melaksanakan fungsi navigasi lokasi menggunakan API JS dan Amap. Melalui panggilan API yang sepadan, kami boleh memaparkan peta, menambah penanda dan melukis laluan navigasi pada halaman web atau aplikasi mudah alih. Mengikut keperluan sebenar, kami boleh mengubah suai dan mengembangkan kod dengan sewajarnya untuk memenuhi keperluan fungsi navigasi lokasi tertentu.

Atas ialah kandungan terperinci Cara menggunakan JS dan Amap untuk melaksanakan fungsi navigasi lokasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!