el-amap的使用

前言

el-amap只试用于JSAPI 1.4.15,简易开发试用,JSAPI 2.0版本需原生引入。
#1.下载vue-amap

npm run vue-amap --save
cnpm run vue-amap --save

2.去高德地图申请key

https://console.amap.com/dev/index
在我的应用中创建应用

el-amap的使用_第1张图片

3.在src的main.js文件中引入

//高德地图
import VueAMap from 'vue-amap';
Vue.use(VueAMap);
// 初始化vue-amap
VueAMap.initAMapApiLoader({
    key: '在高德地图申请的key',
    // 插件集合 (插件按需引入)
    plugin: [
        "AMap.Autocomplete", //输入提示插件
        "AMap.PlaceSearch", //POI搜索插件
        "AMap.Scale", //右下角缩略图插件 比例尺
        "AMap.OverView", //地图鹰眼插件
        "AMap.ToolBar", //地图工具条
        "AMap.MapType", //类别切换控件,实现默认图层与卫星图、实施交通图层之间切换的控制
        "AMap.PolyEditor", //编辑 折线多,边形
        "AMap.CircleEditor", //圆形编辑器插件
        "AMap.Geolocation" //定位控件,用来获取和展示用户主机所在的经纬度位置
    ]
});

4.使用


         




                    
                    

你可能感兴趣的:(vue,vue.js,前端,javascript)