调用高德地图的API,首先注册高德开发平台的账号,称为高德地图开发者,创建应用后申请key(步骤如下):
进入高德开发平台——进入右上角控制台——进入做上角应用管理——创建key
安装高德地图组件: vue-amap
引入组件:
import AMap from 'vue-amap'
Vue.use(AMap)
初始化vue-amap,放入对应的key值,在插件中加入所需要的搜索和定位插件:
AMP.initAMapApiLoader({
key: 'f523cf8eae57713e12ba711eb665e9e8',plugin: ['AMap.PlaceSearch','AMap.Geolocation']
})
在搜索栏对应的input搜索框中加入对应的搜索事件:
@keyup = "keyUpSearch"
在方法中定义keyUpSearch方法:
methods:{
keyUpSearch(){
let self = this;
var txt = this.$refs.searchText.value;
AMap.service(["AMap.PlaceSearch"],function(){
var PlaceSearch = new AMap.PlaceSearch({ //构造地点查询类
pageSize: 12,pageIndex: 1,city: "成都",cityLimit: "true",panel: "temp" //对搜索结果的展示面板对元素id
});
PlaceSearch.search(txt.function(status,result){
if(status === 'complete' && result.info === 'OK'){
console.log(result);
}
})
})
}
}
此时,当搜索框获取到内容时,监听到键盘的keyup响应事件,执行keyUpSearch方法,获取到相应地点的信息。
作者:rookie.he(kuke_kuke)
博客链接:欢迎关注支持,谢谢!