色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

vue amap poi 搜索

江奕云2年前10瀏覽0評論

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搜索的實現。通過輸入關鍵詞,可以搜索到該關鍵詞相關的地點,并返回相應的地點信息。同時,我們也可以通過設置搜索的城市來更加精確地搜索。