1 首先使用npm 下载 安装
npm install vue-amap --save
2 首先需要一个容器来放地图
html,
body,
#map{
width: 100%;
height: 100%;
margin: 0px;
font-size: 13px;
.amap-map{
width: 1280px;
height: 100%;
position: absolute;
top: 0;
}
}
由于本次项目需求是按需加载,
首先在 webpack.base.conf.js中,
必须require,
externals: [
require(‘webpack-require-http’)
],
其次,就是在你需要的页面中引入高德地图即可
在beforeMount()中加载高德地图
beforeMount() {
require([
“https://webapi.amap.com/maps?v=1.4.9&key=您申请的key值”
], () => {
setTimeout(() => {
var map = new AMap.Map(“container”, {
resizeEnable: true, //是否监控地图容器尺寸变化
zoom: 10, //初始化地图层级
center: [116.397428, 39.90923], //初始化地图中心点
isCustom: true, //使用自定义窗体
touchZoom: true,
scrollWheel: true
});
}, 1500);
});
}
注意:这里在需要加载地图的页面不需要import 重复引入,重复引入报错 AMap没有定义