如何使用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在地圖上展示出來。讀者可以根據自己的需求，進一步擴展和優化代碼，實現更豐富的功能。
