vue中引用高德地图API

作者:未知 / 来源:网络 / 整理:脚本之家如果知识不能与人分享,这不算是真正的知识了。
调用高德地图的API,首先注册高德开发平台的账号,称为高德地图开发者,创建应用后申请key(步骤如下):进入高德开发平台——进入右上角控制台——进入做上角应用管理——创建key安装高德地图组件: vue-amap引入组件:import AMap from 'vue-amap'Vue.use(AMap)初始化vue-amap,放入对应的key值,在插件中加入所需...

调用高德地图的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)
博客链接:http://blog.csdn.net/qq_33599109
欢迎关注支持,谢谢!

你可能在找的问题:

vue教程

Vue页面跳转动画效果的实现方法

百度了好久都没办法实现vue中一个页面跳到另一个页面,甚至到google上搜索也是没办法的,最终还是找了高人亲自指导,所以下面这篇文章主要给大家介绍了关于Vue页面跳转动画效果的实现方法,需要的朋友可以参考下

vue教程

vue构建动态表单的方法示例

这篇文章主要介绍了vue构建动态表单的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

vue教程

玩转vue的slot内容分发

这篇文章主要介绍了玩转vue的slot内容分发,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

vue教程

vue 巧用过渡效果(小结)

这篇文章主要介绍了vue 巧用过渡效果(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

标题
返回顶部