VUE中使用高德地图-按需加载

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没有定义