uniapp使用高德JS API

最新推荐文章于 2025-04-25 16:55:37 发布
最新推荐文章于 2025-04-25 16:55:37 发布
阅读量5.5k 收藏 15
点赞数 6
文章标签： uni-app 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YiYeZhiQiuDe_yzq/article/details/128373251
版权

在uniapp开发学习过程中经常会遇到uniapp内置地图组件map功能不够强大，或者地图层级过高通过nvue等方式解决又会出现其他bug的情况。

这种时候就需要用到第三方提供的地图插件来实现自己想要的效果了。在国内最常用的地图应该就是高德，腾讯，百度等平台开发的地图。

今天就以高德为例详细教大家如何在自己的uniapp项目中使用高德地图。

想要在uniapp中使用高德地图只需要三个步骤。

第一步：申请key

 准备-入门-教程-地图 JS API v2.0|高德地图API (amap.com)

第二步：加载JS API

JSAPI 的加载-入门-教程-地图 JS API v2.0|高德地图API (amap.com)

第三步：初始化地图
快速上手-入门-教程-地图 JS API v2.0|高德地图API (amap.com)

这些都是高德文档上已经有了的就不多赘述了，下面说一些注意事项

1、申请key的时候勾选Web端࿰

最低0.47元/天 解锁文章
【实战教程】Uni-App开发：轻松集成高德地图，实现精准位置选点功能
luhanglh的博客
07-15 8613
【实战教程】Uni-App开发：轻松集成高德地图，实现精准位置选点功能。 uni-app实现高德地图选点功能
uniapp使用高德地图api获取地址描述数据
qq_44829351的博客
09-06 455
在项目需要的的页面引入，通过uniapp提供的uni.getLocation()方法获取地理位置，开启高精度定位，传入高德地图获取详细地理信息。uniapp为实现打卡功能，需要获取用户当前的地理位置，所以在此做开发记录，仅供参考。先引入高德地图小程序api文件，具体下载地址。
uniapp使用高德地图js api
m0_58401537的博客
08-31 986
有大神知道吗?求解?
uni-app 引入高德地图
最新发布
lh_1254的博客
04-25 1676
icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png', // 自定义图标（可选）​。AMapUI: { version: '1.1', plugins: ['geo/DistrictExplorer'] }, // 可选UI组件​。mapStyle: 'amap://styles/light' // 地图样式（浅色主题）​。// 地图定位到搜索结果​。
uniapp小程序使用高德地图
Rio_Gaven的博客
02-22 7518
14.对了，wx.getLocation(获取当前位置)这个api建议是开通下，方便用户打开地图就显示用户当前的位置（注意：一定是要在需要使用该功能的页面调用，不然官方会判定违法获取隐私，禁用你的功能，本人已踩过坑，当然，也通过申诉解封，在其他文章也有写，可以去参考下）13.其余的就是根据UI图来写对应的组件，如:搜索栏，搜索列表什么的，具体需要的方法可以参考高德开放平台手册，获取周边啥啥啥的。2.扫二维码选择对应的项目-设置-服务内容声明-用户隐私保护指引-更新-按照下面红框里的设置。
记录：uniapp微信小程序通过高德api获取当前详细的地理位置信息
汪同学丶的博客
10-13 7514
概述 由于当前业务需要在使用小程序的时候获取当前所在的详细地理位置信息，所以我们采用高德地图的api来获取当前位置的中文描述+区域编码。 使用 获取key 注：可打开高德官网链接按照步骤获取key，或通过如下步骤获取 1、进入高德开放平台 2、没有账号进行注册｜有账号直接登录 3、点击右上角 控制台 -> 应用管理 -> 我的应用 -> 创建应用 4、点击当前创建的应用下的添加按钮 5、提交之后即可得到高德api的key 获取并使用高德微信小程序js依赖文件amap-wx.js 1、高
uniapp如何使用高德地图api
m0_73333688的博客
07-06 2900
注册高德开发者账号：首先，您需要在高德开放平台注册一个开发者账号，并创建一个应用来获取API密钥。这个密钥将用于在Uniapp中进行地图API的调用。创建Uniapp项目：使用Vue-cli或HBuilderX等工具创建一个Uniapp项目，并在项目中引入相关的依赖。安装高德地图插件：在Uniapp项目的根目录下，执行以下命令安装高德地图插。
uniapp实现高德地图renderjs
jc1998的博客
11-22 240
uniapp实现高德地图renderjs,实现和网页端一样的高德地图
小程序/uniapp 使用高德地图api获取天气
hwjjjjjj的博客
10-14 1936
准备工作： 1.高德地图微信小程序插件js:相关下载-微信小程序插件 | 高德地图API 2.高德地图key：我的应用 | 高德控制台 编写代码 1.引入高德地图js //高德SDKjs import amap from '@/common/amap-wx.130.js'; //自己js的所在的位置 2.创建地图实例 var myAmapFun = new amap.AMapWX({ key: '高德地图申请的key' ...
高德地图api离线化，支持uniapp，web，触屏操作
04-25
1. **源码分析与修改**：首先，需要对高德地图API的JS文件进行深入研究，理解其工作原理和调用机制。然后，将其中的网络请求部分替换为本地资源访问，这通常涉及到JSONP、Ajax等网络请求技术的替代方案。 2. **资源...
uniapp请求高德api接口解析逆地理编码
weixin_52830464的博客
06-17 482
【代码】uniapp调用高德接口根据经纬度解析逆地理编码。
在uniapp做高德地图，发布为h5网页
11-14
在uniapp做高德地图，发布为h5网页，内嵌入安卓app中，代码摘要，不含敏感信息在uniapp做高德地图，发布为h5网页，内嵌入安卓app中，代码摘要，不含敏感信息
uniapp引入高德地图的方法
m0_65742145的博客
10-11 1027
【代码】uniapp引入高德地图的方法。
uniapp上高德（百度）地图API的使用(APP安卓)
Primary_Insist的博客
02-14 8816
当uniapp自带的map无法满足开发需求，通过webview、renderjs使用百度或高德的api进行开发地图。
uniApp使用高德地图api
呆子小木心的博客
11-16 7416
uniApp使用高德地图api 1，在自己项目中的/src/common/js中的weixin.js写入，没有就新建文件，（具体目录因自己项目而议） export const weixin = { /* 获取地理位置接口 */ getLocation: function (callback) { let option = { type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02' success: fun
uniappH5中使用高德API
halfgod的博客
05-19 5363
高德的API有现成的SDK支撑安卓/IOS 但是没有专门的API支撑H5（或者说不用专门支撑） 当uniapp中调用高德API的时候就会遇到问题: 因为直接用<sctipt>引入外部js肯定不行了 所以为了解决这个问题就必须引入在线jsAPI 下面就介绍步骤 1.引入在线jsAPI 专门新建个工具类，这样当需要调用地图的时候直接引用该方法就行 a.直接引用js肯定不行，所以采用回调函数的方式引入 b.因为高德的API是异步的，所以我们把他封装成Promise函数 expo...
uniapp H5端中使用高德API
小傲哥哥的博客
07-13 5607
高德的API有现成的SDK支撑安卓/IOS 但是没有专门的API支撑H5（或者说不用专门支撑） 当uniapp中调用高德API的时候就会遇到问题: 因为直接用引入外部js肯定不行了 (uniapp项目中压根就没有 html 页面,这也是我最无语的地方，为这事找了一两天的解决方法) 所以为了解决这个问题就必须引入在线jsAPI 下面就介绍步骤 1.引入在线jsAPI 专门新建个工具类，这样当需要调用地图的时候直接引用该方法就行 a.直接引用js肯定不行，所以采用回调函数的方式引入 b.因为高德的API是
uniapp App端地图定位选择，使用高德地图api根据经纬度获取省市区信息
qq_39534956的博客
05-11 3271
output=JSON&location=经度,纬度&key=高德地图key。3.在manifest.json --> App模块配置中, 勾选maps地图选项，选用百度地图或者高德地图均可，填写相应平台申请的key值。1.使用uni.chooseLocation()获取到经纬度数据；
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值