在vue3项目中使用新版高德地图

高德开发平台 : 高德开放平台 | 高德地图API (amap.com)

1. 首先你要注册好账号登录

2. 获取key和密钥 

在vue3项目中使用新版高德地图_第1张图片

 在vue3项目中使用新版高德地图_第2张图片

自2021年12月02日升级,升级之后所申请的 key 必须配备安全密钥 jscode 一起使用

NPM方式安装和使用(基础版):

        按 NPM 方式安装使用 Loader :

npm i @amap/amap-jsapi-loader --save

        在页面中通过NPM 方式安装的使用 :






完整代码:






地图插件效果图:

在vue3项目中使用新版高德地图_第3张图片

实例化点标记 :

        第一种方式效果:在vue3项目中使用新版高德地图_第4张图片

         第二种方式效果:

在vue3项目中使用新版高德地图_第5张图片

 矢量图 --> 折线:

在vue3项目中使用新版高德地图_第6张图片

你可能感兴趣的:(前端开发,框架,vue.js,javascript,前端)