调用高德地图的API,首先注册高德开发平台的账号,称为高德地图开发者,创建应用后申请key(步骤如下): 进入高德开发平台——进入右上角控制台——进入做上角应用管理——创建key 安装高德地图组件: vue-amap 引入组件:
<pre class="prettyprint"><code class=" hljs python"><span class="hljs-keyword">import AMap <span class="hljs-keyword">from <span class="hljs-string">'vue-amap'
Vue.use(AMap)
初始化vue-amap,放入对应的key值,在插件中加入所需要的搜索和定位插件:
<pre class="prettyprint"><code class=" hljs css"><span class="hljs-tag">AMP<span class="hljs-class">.initAMapApiLoader(<span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">key:<span class="hljs-value"> <span class="hljs-string">'f523cf8eae57713e12ba711eb665e9e8',plugin: [<span class="hljs-string">'AMap.PlaceSearch',<span class="hljs-string">'AMap.Geolocation']
})
在搜索栏对应的input搜索框中加入对应的搜索事件:
<pre class="prettyprint"><code class=" hljs ruby"><span class="hljs-variable">@keyup = <span class="hljs-string">"keyUpSearch"
在方法中定义keyUpSearch方法:
<pre class="prettyprint"><code class=" hljs javascript">methods:{
keyUpSearch(){
<span class="hljs-keyword">let self = <span class="hljs-keyword">this;
<span class="hljs-keyword">var txt = <span class="hljs-keyword">this.$refs.searchText.value;
AMap.service([<span class="hljs-string">"AMap.PlaceSearch"],<span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params">(){
<span class="hljs-keyword">var PlaceSearch = <span class="hljs-keyword">new AMap.PlaceSearch({ <span class="hljs-comment">//构造地点查询类
pageSize: <span class="hljs-number">12,pageIndex: <span class="hljs-number">1,city: <span class="hljs-string">"成都",cityLimit: <span class="hljs-string">"true",panel: <span class="hljs-string">"temp" <span class="hljs-comment">//对搜索结果的展示面板对元素id
});
PlaceSearch.search(txt.function(status,result){
<span class="hljs-keyword">if(status === <span class="hljs-string">'complete' && result.info === <span class="hljs-string">'OK'){
console.log(result);
}
})
})
}
}
此时,当搜索框获取到内容时,监听到键盘的keyup响应事件,执行keyUpSearch方法,获取到相应地点的信息。
作者:rookie.he(kuke_kuke) 博客链接: 欢迎关注支持,谢谢!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。