学会在Vue项目中插入高德地图JS API与地图的相关设置，看这一篇就够了~（保姆级精简教学）

最新推荐文章于 2024-04-26 10:59:11 发布
VIP文章 最新推荐文章于 2024-04-26 10:59:11 发布
阅读量1.5k 收藏 5
点赞数 2
分类专栏： 前端 html 文章标签： 数据库 intellij-idea dba
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bsegebr/article/details/123227496
版权

高德地图API官网：高德开放平台 | 高德地图API。由于博主是基于前端 Vue 框架进行开发的，所以针对地图 JavaScript API****结合 Vue 展开介绍。

一、案例效果

二、开发准备

需要注意想要使用 JS API 必须注册账号并获取 key 值。

1. 注册高德开放平台账号

正常输入个人信息注册即可。

2. 创建应用添加 key 值

注册成功之后，进入控制台，然后点击创建新应用；

填写名称应用名称和类型之后就可以看到已创建的应用了；

接下来点击“添加”为应用添加 key 值；

最低0.47元/天 解锁文章
bsegebr
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中使用高德地图（JSAPI2.0示例）
04-28
参考高德地图官网的示例实现的。
详解vue项目中调用百度地图API使用方法
10-17
主要介绍了vue项目中调用百度地图API使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue中使用高德地图——加载高德地图几种方法
qq_43390886的博客
02-18 1136
总结在vue中 几种使用高德地图 api方法引入原生高德地图报错’AMap’ is not defined的解决方法。
在vue项目中引入高德地图及其UI组件的方法
12-12
引入高德地图： 打开index.html，引用高德地图的JavaScript API： [removed][removed] 在“key=”这里添加你申请的key，key不需要加引号。 引入高德地图UI组件，只需要在上面代码后面再加一串代码： [removed][removed] 配置webpack 打开webpack.base.conf.js文件，找到modul
vue中使用高德地图
牛马程序员进阶之路
07-07 3041
使用高德地图在vue中完成功能：单一某省的地图，3D地图展示，3D模型在地图加载并展示，地图上绘制圆圈。
jsapi开发指南手册
07-11
javascriptapi开发文档，可以下载后观看，有效的帮助我们
执行npm install gdt-jsapi
u013023845的博客
09-17 2643
在政务钉钉开发者工具中，要求在项目的根目录执行npm install gdt-jsapi，首先我们得先去下载 | Node.js然后进行安装。安装好以后，我们通过CMD命令进入到项目的根目录，然后在CMD中执行npm install gdt-jsapi，中途遇到安装失败等问题可以重启电脑再尝试。 ...
【经验分享】前端分享会-地图模块、echarts以及插件分享
weixin_43863316的博客
02-28 3660
地图模块：ECharts使用SVG做地图、OpenLayer简要入门 ECharts相关小tips介绍 实用插件介绍
浙政钉踩坑记录：真机调试-H5APP 不存在
qq_21113235的博客
07-04 3287
uniapp写浙政钉的一些踩坑记录
uni专有钉钉获取用户免登
weixin_59124987的博客
05-16 784
就是有点麻烦，uni每次编译的时候，小程序开发者工具这边引入的gdt-jsapi会消失，需要再重新引入，每天重新启动项目时也需要重新在小程序开发者工具安装node配置文件和下载gdt-jsapi。所以在小程序开发者工具里安装 npm install gdt-jsapi，在引入node配置文件即可。不要在uni 安装 gdt-jsapi。再在需要用到免登方法的文件里引入即可。再进行安装免登gdt-jsapi。先在uni写上专有钉钉的免登方法。
前端基于百度地图插件
04-17
地图插件，坐标附近环境配置
在vue中高德地图引入和轨迹的绘制的实现
01-21
vue中使用cdn引入高德地图，并在main.js中进行全局配置。（百度上有高德地图引入与配置方法，这里就不详细介绍）； 1） npm install vue-amap --save 2） import VueAMap from ‘vue-amap' Vue.use(VueAMap); ...
专有钉钉开发踩坑小记录
最新发布
weixin_59005857的博客
04-26 497
公司要将钉钉小程序上架到浙政钉上，钉钉小程序转为浙政钉小程序进行开发，首先要在专有钉钉进行开发调试没问题才能上架浙政钉记录下之前遇到的一些小坑。
专有钉钉H5微应用开发，个人总结，详细教程
bao_Heng的博客
03-07 4436
专有钉钉、H5微应用开发教程，个人经验总结。钉钉或者浙政钉类似。
Vue项目中引入高德地图步骤详解
用心创作每一篇文章
03-03 1万+
Vue项目中引入高德地图步骤详解
使用 Echarts 插件完成中国地图
weixin_62897746的博客
12-05 4835
大家都知道，一般情况下，想要使用前端设置一个 中国地图 需要使用 canvas 画布进行编写，不仅代码多，逻辑处理麻烦，今天交大家使用一个插件，使用它就可以轻松的做出各种图。 注册的是中国地图，必须包括geo组件或者mep图标类型的时候才可以使用 地图分为：世界地图，中国地图，省份地图，市区地图 引入中国地图代码 import geoJson from "echarts/map/json/china"; 注册地图 this.$echarts.registerMap("china", geoJson);
浙政钉（专有钉钉）扫码登录，h5内嵌免登
weixin_43864545的博客
03-28 6587
浙政钉pc端扫码登录， 内嵌h5页面免登。
Vue+百度地图api
热门推荐
qq_42155347的博客
12-30 1万+
Vue中使用百度地图api
vue项目引入高德地图开放api
07-08
要在Vue项目中引入高德地图开放API，你可以按照以下步骤操作： 1. 在你的Vue项目中使用npm或yarn安装高德地图的JavaScript API SDK。运行以下命令： ``` npm install @amap/amap-jsapi-loader ``` 或者 ``` yarn add @amap/amap-jsapi-loader ``` 2. 在需要使用地图的组件中，引入地图SDK并加载地图： ```javascript import { createApp } from 'vue'; import AMapLoader from '@amap/amap-jsapi-loader'; createApp({ mounted() { AMapLoader.load({ key: '你的高德地图API Key', version: '1.4.15', // 地图SDK的版本号 plugins: ['AMap.Geolocation'] // 需要使用的插件列表，如定位插件 }).then((AMap) => { const map = new AMap.Map('mapContainer', { // 地图的配置项 }); // 其他地图相关操作 }); } }).mount('#app'); ``` 3. 在模板中添加一个容器用于显示地图： ```html <template> <div id="mapContainer"></div> </template> ``` 记得将`你的高德地图API Key`替换为你自己的API Key，你可以在高德开放平台申请一个API Key并开通地图服务。 这样，你就可以在Vue项目中成功引入高德地图开放API，并使用地图功能了。注意确保在使用API时遵守高德地图的相关使用规定。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值