一、引入js包：

index.html：
// 百度地图
<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=`申请的秘钥`"></script>
// 高德地图
<script language="javascript" src="http://webapi.amap.com/maps?v=1.4.15&key=`申请的秘钥`&plugin=AMap.ControlBar,Map3D,AMap.DistrictSearch"></script>

注意：

申请高德地图时注意Web端（JS API）和Web服务的差别，我觉得这俩长得挺像的一开始还用错了。

看一下官方对两者的描述说明：

个人理解Web服务API是http接口调用的，供后台使用的，前端使用JS API即可。

二、声明全局变量：

webpack.base.conf.js文件

module.exports = {
  externals: {
    'BMap': 'window.BMap', // 百度地图
    'AMap': 'AMap' // 高德地图
  },
  ……
}

或vue.config.js文件

module.exports = {
  configureWebpack: {
    // 全局常量定义
    externals: {
      'BMap': 'window.BMap', // 百度地图
      'AMap': 'AMap' // 高德地图
    }
  },
  ……
}

三、加载使用：

// 在百度地图容器中创建一个地图 后续使用详见百度地图api

this.map = new BMap.Map('subwayContent')

// 高德地图的使用

加载全地图：

import AMap from 'AMap'
this.map = new AMap.Map('subwayContent', {
        resizeEnable: true,
        rotateEnable: true,
        pitchEnable: true,
        showLabel: true, // 是否显示地图文字标记
        zoom: 11,
        pitch: 60, // 视角
        rotation: -15,
        viewMode: '3D', // 开启3D视图,默认为关闭
        // buildingAnimation: true, // 楼块出现是否带动画
        cursor: 'hand', // 鼠标在地图上的表现形式
        expandZoomRange: true,
        zooms: [3, 20],
        skyColor: '#132237', // 天空的颜色
        // layers: [
        //   new AMap.TileLayer.RoadNet({
        //     rejectMapMask: false
        //   })
        // ],
        // center: [113.289243, 23.23746] // 地图中心点设置
      })

加载局部行政区域地图：

// 利用行政区查询获取边界构建mask路径 只显示行政区域内的地图部分
let opts = {
    subdistrict: 0,
    extensions: 'all',
    level: 'city'
}
let district = new AMap.DistrictSearch(opts)
district.search('XX市', function (status, result) {
    let bounds = result.districtList[0].boundaries
    let mask = []
    for (let i = 0; i < bounds.length; i += 1) {
        mask.push([bounds[i]])
    }
    map = new AMap.Map('container', {
        mask: mask,
        center: [116.68, 23.62],
        disableSocket: true,
        viewMode: '3D',
        showLabel: false,
        labelzIndex: 130,
        expandZoomRange: true,
        zooms: [3, 20],
        zoom: 11,
        pitch: 0,
        // rotation: -15, // 导致有些浏览器没有3D展示形式的就会斜了
        skyColor: '#D5EFEE'
    })
    // 设置光照
    map.AmbientLight = new AMap.Lights.AmbientLight([1, 1, 1], 0.5)
    map.DirectionLight = new AMap.Lights.DirectionLight([0, 0, 1], [1, 1, 1], 1)
    // 添加3D图层
    object3Dlayer = new AMap.Object3DLayer() // { zIndex: 1 }
    map.add(object3Dlayer)
    // 绑定地图点击事件
    map.on('click', function (e) {
        console.log(e.lnglat.getLng(), e.lnglat.getLat()) // 获取点击点的经纬度
    })
    // 绑定地图拖动事件
    map.on('dragend', function () {
        console.log('地图拖动')
    })
    // 地图加载完成提示
    map.on('complete', function () {
        console.log('地图加载完成！')
    })
    // 设置主题颜色
    map.setMapStyle('amap://styles/fresh')
    // 卫星覆盖地图
    let satelliteLayer = new AMap.TileLayer.Satellite()
    map.add(satelliteLayer)
})