AMap是高德地圖開放平臺提供的地圖服務API,Vue AMap是基于Vue.js和AMap實現的一套地圖組件庫。其中,Vue AMap POI搜索是其中的一個組件,用于搜索某個關鍵詞相關的地點。下面將詳細介紹如何在Vue項目中使用Vue AMap POI搜索。
首先,需要在Vue項目中引入Vue AMap和Vue AMap POI搜索組件。這里推薦使用npm安裝。安裝完成后,在代碼中引入相關模塊:
import VueAMap from 'vue-amap'; Vue.use(VueAMap); import VueAMapSearch from 'vue-amap-search'; export default { components: { VueAMapSearch },
接著,在數據中聲明AMap的API Key。這個Key是在高德地圖開放平臺申請的,申請過程較為簡單。
data() { return { apiKey: 'xxxxxxxxxxxxxxx' } },
然后,在頁面中加入Vue AMap和Vue AMap POI搜索組件。Vue AMap組件需要傳入一個地圖容器的CSS選擇器,而Vue AMap POI搜索組件需要傳入要搜索的關鍵詞。
最后,在mounted函數中使用AMap的方法獲取當前地圖對象,在獲取到地圖對象后,再將獲取到的地圖對象setCity進行設置。此處的城市可以自定義或從用戶選擇中獲取。
mounted() { this.$nextTick(() =>{ this.AMap = this.$refs.vueAMap.AMap; this.AMap.plugin('AMap.CitySearch', () =>{ let citysearch = new this.AMap.CitySearch(); citysearch.getLocalCity((status, result) =>{ if (status === 'complete' && result.info === 'OK') { if (result && result.city && result.bounds) { let cityinfo = result.city; this.AMap.plugin(['AMap.PlaceSearch'], () =>{ let placeSearch = new this.AMap.PlaceSearch({}); placeSearch.setCity(cityinfo); placeSearch.search(this.keyword, (status, result) =>{ // 返回搜索結果 }); }); } } }); }); }); },
通過以上步驟,就可以完成Vue AMap POI搜索的實現。通過輸入關鍵詞,可以搜索到該關鍵詞相關的地點,并返回相應的地點信息。同時,我們也可以通過設置搜索的城市來更加精確地搜索。
上一篇vue ajax請求方法
下一篇vue admin 顏值