Cara menggunakan JS dan Amap untuk melaksanakan fungsi carian POI di sekitar lokasi

Cara menggunakan JS dan Amap untuk melaksanakan fungsi carian POI di sekitar lokasi

Dengan pembangunan Internet mudah alih, aplikasi peta telah menjadi bahagian yang amat diperlukan bagi pengguna telefon mudah alih. Apabila membangunkan aplikasi peta, selalunya perlu mendapatkan maklumat POI berdekatan untuk memenuhi keperluan pengguna. Artikel ini akan memperkenalkan cara menggunakan JavaScript dan API Amap untuk melaksanakan fungsi carian POI di sekitar lokasi dan menunjukkan beberapa contoh kod khusus.

Pertama, kita perlu memperkenalkan fail JavaScript API Peta Amap ke dalam fail HTML. Ini boleh dicapai dengan menambahkan kod berikut dalam teg kepala:

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

YourApiKey di sini perlu digantikan dengan kunci API Amap yang anda mohon. Untuk memohon kunci, sila rujuk dokumentasi pembangun Amap.

Seterusnya, kami perlu mendapatkan maklumat latitud dan longitud pengguna dalam kod JavaScript untuk mencari POI berdekatan. Ini boleh diperolehi melalui API Geolokasi pelayar. Berikut ialah contoh kod untuk mendapatkan koordinat lokasi pengguna:

navigator.geolocation.getCurrentPosition(function(position) {
  var latitude = position.coords.latitude;
  var longitude = position.coords.longitude;

  // 以下是高德地图API的代码，用于创建地图和标注用户位置
  var map = new AMap.Map('mapContainer', {
    center: [longitude, latitude],
    zoom: 13
  });
  
  var marker = new AMap.Marker({
    position: [longitude, latitude]
  });

  map.add(marker);
});

mapContainer dalam kod di atas ialah id elemen kontena dalam fail HTML, digunakan untuk memaparkan peta. Peta dibuat dan dipusatkan di lokasi pengguna, dan label ditambahkan untuk mewakili lokasi pengguna.

Kemudian, kami boleh melakukan carian POI di sekitar lokasi berdasarkan lokasi dan kata kunci pengguna. Berikut ialah contoh kod untuk mencari dan memaparkan POI berdekatan:

// 根据用户位置和关键词进行地点搜索
var keyword = '餐厅';
AMap.service('AMap.PlaceSearch').then(function() {
  var placeSearch = new AMap.PlaceSearch({
    pageSize: 10,
    pageIndex: 1,
    citylimit: true,
    map: map
  });

  placeSearch.searchNearBy(keyword, [longitude, latitude], 1000, function(status, result) {
    if (status === 'complete') {
      var pois = result.poiList.pois;
      
      // 遍历搜索结果，展示POI标注
      pois.forEach(function(poi) {
        var poiMarker = new AMap.Marker({
          position: [poi.location.lng, poi.location.lat]
        });

        map.add(poiMarker);
      });
    }
  });
});

Kata kunci dalam kod di atas adalah kata kunci carian dan boleh diubah mengikut keperluan sebenar. Kaedah searchNearBy digunakan untuk melakukan carian POI di sekitar lokasi Parameter ialah kata kunci, koordinat lokasi pengguna, jejari carian dan fungsi panggil balik. Parameter hasil dalam fungsi panggil balik mengandungi maklumat hasil carian dan boleh diproses mengikut keperluan.

Akhir sekali, kita perlu menambah elemen bekas pada fail HTML untuk memaparkan peta. Contohnya:

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

Lebar dan tinggi dalam kod di atas boleh dilaraskan mengikut keperluan sebenar.

Melalui kod di atas, kami boleh menggunakan JavaScript dan API Amap untuk melaksanakan fungsi carian POI di sekitar lokasi, dan memaparkan POI yang dicari pada peta. Pembaca boleh mengembangkan dan mengoptimumkan lagi kod mengikut keperluan mereka sendiri untuk mencapai fungsi yang lebih kaya.

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