vue3.0+ts使用原生高德地图解决方法

Posted 2023-03-19

参考技术A 1.引入高德sdk

2.为了防止打包时把高德纳入，我们需要在webpack中配置，这里以vue.config.js为例

3.声明文件，用了typescript，那么就是想运用到它的类型提醒功能，那么必不可少地需要引入高德地图的声明文件，由于官方也没有给出，我们只能根据api文档来自己书写自己需要用到的函数声明，下面是我们项目中大部分会用到的声明，可以在src目录下新建一个types文件夹专门用于存放声明文件：
src/types/Amap.d.ts:

4.找到tsconfig.json文件，配置上声明文件

5.接下来就可以在页面中快乐的使用了

vue加载高德地图（原生）

参考技术A 1. 在 public 文件夹下的 index.html 中加入

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

2. 在 vue.config.js 文件中配置 externals

///module.exports =

  devServer:

    port: 57103 // 端口号配置

  ,

  configureWebpack:

    externals:

      'AMap': 'AMap' // 高德地图配置

   

注： vue.config.js 文件要自己创建，vue-cli 3.0 不会自动生成此文件。 此外，修改 vue.config.js 不会触发热加载，也就是修改之后你需要重新 run 一下你的项目，它才能生效。

3.加载地图

地图容器要给他一个宽高。

注：init() 方法请在 mounted 生命周期中调用，因为如果在 created 阶段调用，会找不到 html 元素 div#container

注2:若中途遇到 'map' is assigned a value but never used

可找到package.json中找到rules: 添加 "no-unused-vars":0

最终效果

高德API：https://developer.amap.com/api/javascript-api/guide/map/map-style