记一次在VUE项目中引入高德地图

源起

     由于项目需求，需要在页面上展示建不同楼层的平面布局，类似于室内地图的功能，但室内地图需要相关资质认证，于是改为展示设计给出的楼层平面布局图，实质就是在不同的楼层提示下展示不同图层。

准备工作

1.  在高德地图开发者平台注册账号

2. 根据开发文档，点击「控制台」在「应用管理」 页面「创建新应用」,如图中我已创建应用

3. 为应用添加 Key，「服务平台」一项选择「 Web 端 ( JSAPI ) 」

实际开发

1. 在index.html页面添加 JS API 的入口脚本标签，并替换刚刚申请的应用 key

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>

2.在vue.config.js文件中，将Amap作为外部扩展导入

module.exports={
    ......
    configureWebpack(config) { 
        config.externals = { 
            'AMap': 'AMap'
        }; 
    },
}

3. 在实际开发的地方添加一个div作为地图容器，为该容器指定id属性,并给出高度、宽度

<div id="container"></div>

4. 导入AMap,创建一个图层对象传给layers,并将id container及图层对象 传入构造函数

import AMap from "AMap";

const imageLayer = new AMap.ImageLayer({
        url: this.mapLayer, //图层url
        bounds: new AMap.Bounds(
          [120.19, 30.1897], //图片左下角位置
          [120.191, 30.1899] //图片右上角位置
        ),
        zooms: [10, 18], //设置可见级别，[最小级别，最大级别]
      });

this.map = new AMap.Map("container", {
        resizeEnable: false, //是否监控地图容器尺寸变化
        center: [120.19072, 30.189739],//设置地图中心点坐标
        zoom: 18,//设置地图显示的缩放级别
        layers: [new AMap.TileLayer(), imageLayer], //覆盖图层，这里就是需要显示的楼层平面图
      });