Vue3 + ts 中使用 高德地图

1、高德开放平台

注册账号 -> 个人中心 -> 应用管理 -> 我的应用 -> 添加新应用 -> 添加Key -> 得到key和 jscode（安全密钥）

 2、浏览文档

JS API 结合 Vue 使用-基础-进阶教程-地图 JS API 2.0|高德地图API (amap.com)

3、准备工作

1. 首先安装 npm i @amap/amap-jsapi-loader --save
2. 创建一个有 id 属性的容器
3. 设置样式（宽高等）
4. 引入 import AMapLoader from '@amap/amap-jsapi-loader';

 4、注意几个问题（建议一定要看）

这两个文档都需要看，才能正常的使用高德地图

其中在《JS API 安全秘钥使用》中 提示了key需要和jscode一起使用

其中在《JS API 结合Vue 使用》中的示例代码  并没有写到下面的代码，随后你会发现后面写的功能无法生效

window._AMapSecurityConfig = {
  securityJsCode: '你的jscode'
}

 随后当你写上这行代码的时候会报一个错误，如下

这时候需要我们扩展一下window的对象，创建一个新的 xxx.d.ts 的文件，写以下的代码即可，报错就会解决

5、代码如下 

vue中

onMounted(() => {
  initMap()
})

// 开发环境 配置JSCODE
window._AMapSecurityConfig = {
  securityJsCode: '你的jscode'
}

const initMap = () => {
  AMapLoader.load({
    key: '你的key',
    version: '2.0'
  }).then((AMap) => {
    // 初始化地图
    const map = new AMap.Map('map', {
      // 配置对象
      mapStyle: 'amap://styles/normal',
      zoom: 12
    })

    // 路线规划
    AMap.plugin('AMap.Driving', function () {
      const driving = new AMap.Driving({
        map: map
      })
      
      const startLngLat = [116.379028, 39.865042]; //起始点坐标
      const endLngLat = [116.427281, 39.903719]; //终点坐标
      driving.search(startLngLat, endLngLat, function (status, result) {
        //status：complete 表示查询成功，no_data 为查询无结果，error 代表查询错误
        //查询成功时，result 即为对应的驾车导航信息
      });
    })
  })
}

.d.ts中 

// window 的扩展对象
interface Window {
  _AMapSecurityConfig: {
    securityJsCode: string
  }
}