老规矩,先看效果
第一步:安装amap
npm install vue-amap --save(如果有淘宝镜像可以cnpm install vue-amap --save)
第二步:main.js配置amap
// 初始化vue-amap
AMap.initAMapApiLoader({
// 高德key
key: '你申请的key',
// 插件集合 (插件按需引入)
plugin: ['AMap.Geolocation','AMap.ToolBar']
});
第三步:在页面写div
<div id="container" style="width: 80%; height: 500px"></div>
var map = new AMap.Map('container', {
zoom: 11, //缩放级别
resizeEnable: true,//定位到当前位置
viewMode: '3D', //使用3D视图
})
第四步:添加工具条
map.addControl(new AMap.ToolBar());
记得在初始化的时候就加载页面~
需要添加什么其他的插件记得要在main.js中添加哦~