一、key 值和安全密钥 jscode

① 自2021年12月02日升级，升级之后所申请的 key 必须配备安全密钥 jscode 一起使用。注意：此次升级不会影响之前已获得 key 的使用；升级之后的新增的key必须要配备安全密钥一起使用，本次key升级新增安全密钥，是为了提升广大用户的对自己的key安全有效管理，降低明文传输被窃取的风险。

• 第一种方式：顺序加载

<script type="text/javascript">
  window._AMapSecurityConfig = {
      securityJsCode:'您申请的安全密钥', 
  }
</script>

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

• 第二种方式：异步加载，指的是为 JS API 指定加载的回调函数，在 JS API 的主体资源加载完毕之后，将自动调用该回调函数。回调函数应该声明在 JS API 入口文件引用之前，异步加载可以减少对其他脚本执行的阻塞，HTTPS 下我们也建议使用异步方式。在 src 下新建 utils 文件夹，新建 amap.js 文件，内容为：

/*
 * 异步创建script标签
 */
export default function MapLoader() {
    return new Promise((resolve, reject) => {
        if (window.AMap) {
            resolve(window.AMap)
        } else {
            window._AMapSecurityConfig = {
                securityJsCode: '6666666666666666666',
            }
            var url = 'https://webapi.amap.com/maps?v=2.0&key=' + "666666666666666666666666" + '&callback=onLoad' + '&plugin=Map3D,AMap.PolylineEditor,AMap.MarkerClusterer,AMap.MouseTool,AMap.Autocomplete,AMap.CustomLayer,AMap.convertFrom,AMap.HeatMap,AMap.GeometryUtil,AMap.RangingTool,AMap.PlaceSearch,AMap.DistrictSearch,AMap.ImageLayer,AMap.Bounds,AMap.View2D,AMap.OverView,AMap.Scale,AMap.ToolBar,AMap.HeatMap,AMap.BezierCurveEditor' + '&Loca=' + '2.0.0'
            var script = document.createElement('script')
            script.charset = 'utf-8'
            script.src = url
            script.onerror = reject
            document.head.appendChild(script)
        }
        window.onLoad = () => {
            resolve(window.AMap)
        }
    })
}

② 使用 amap.js

• 在需要用到地图的文件里引入异步创建script标签的方法
• 页面组件在 onMounted 生命周期里初始化地图

  import MapLoader from 'utils/amap.js';
 // 初始化地图
  onMounted(() => {
    MapLoader().then(aMap => {
      AMap = aMap;
      setTimeout(() => {
        initMap();
      }, 0);
    });
  });

• 类似 dialog 这类页面挂载时不显示的组件需要监听其可见状态 Visible 为 true 的时候，因此要在 watch 里面初始化地图。

  import MapLoader from 'utils/amap.js';
 // 初始化地图
   watch(Visible, newVal => {
    if (newVal) {
      MapLoader().then(aMap => {
        AMap = aMap;
        setTimeout(() => {
          initMap();
        }, 0);
      });
    }
  });

二、高德地图 api 两个版本区别

目前，高德地图 api 常用版本为 1.4 和 2.0 ，两个版本在具体使用上区别不大，但是不能混用版本，且有一些注意点

• api 命名方式有细微差别，比如地图工具 AMap.Autocomplete 在 1.4 版本中为非驼峰命名，而在 2.0 版本中为大驼峰命名 AMap.AutoComplete
• 3d 开发时的不同，AMap.Object3DLayer() 只在 1.4 版本中存在

• 在 2.0 版本中已经没有 AMap.Object3DLayer() 这个 api 了，取而代之的是更加灵活的 AMap.GLCustomLayer() ,其作为一个开放接口可接入各类第三方插件