如何使用JS和高德地圖實現地點週邊POI搜尋功能

如何使用JS和高德地圖實現地點週邊POI搜尋功能

#隨著行動互聯網的發展，地圖應用程式已成為手機用戶不可或缺的一部分。而在開發地圖應用程式時，經常需要透過取得附近的POI資訊來滿足使用者的需求。本文將介紹如何使用JavaScript和高德地圖API實現地點週邊POI搜尋功能，並展示一些具體的程式碼範例。

首先，我們需要在HTML檔案中引入高德地圖API的JavaScript檔案。可以透過在head標籤中加入以下程式碼來實現：

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

這裡的yourApiKey需要替換成你自己申請的高德地圖API的金鑰。密鑰的申請可參考高德地圖開發者文件。

接下來，我們需要在JavaScript程式碼中取得使用者所在的經緯度信息，以便進行附近POI搜尋。這可以透過瀏覽器的Geolocation API來取得。以下是取得使用者位置座標的程式碼範例：

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是HTML檔案中一個容器元素的id，用來展示地圖。創建了地圖並將其中心設置為用戶的位置，並添加了一個標註表示用戶的位置。

然後，我們可以根據使用者的位置和關鍵字進行地點週邊POI搜尋。以下是搜尋並展示附近POI的程式碼範例：

// 根据用户位置和关键词进行地点搜索
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);
      });
    }
  });
});

上述程式碼中的keyword是搜尋關鍵字，可以根據實際需求進行更改。 searchNearBy方法用於執行地點週邊POI搜索​​，參數分別為關鍵字、使用者位置座標、搜尋半徑、回呼函數。回調函數中的result參數包含了搜尋結果的信息，可以根據需求進行處理。

最後，我們需要在HTML檔案中加入一個用來展示地圖的容器元素。例如：

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

上述程式碼中的width和height可以根據實際需求進行調整。

透過以上程式碼，我們可以實現使用JavaScript和高德地圖API來實現地點週邊POI搜尋功能，並將搜尋到的POI在地圖上展示出來。讀者可以根據自己的需求，進一步擴展和優化程式碼，實現更豐富的功能。

以上是如何使用JS和高德地圖實現地點週邊POI搜尋功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！