vue中引用高德地图API

调用高德地图的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
欢迎关注支持，谢谢！