uniapp(全端兼容) - 最新详细实现uni-app安装配置接入高德地图功能，获取用户当前所在位置（城市名/省份/区县等），实现逆解析获取用户位置信息等功能（详细教程 + 示例源代码）

已于 2024-05-10 10:18:14 修改
阅读量6.5k 收藏 12
点赞数 6
分类专栏： 前端组件与功能(开箱即用) 文章标签： uniapp H5小程序app uniapp接入高德地图教程 uniapp高德地图逆向解析 uniapp高德地图获取用户 uniapp获取用户当前城市名
于 2023-03-05 23:03:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/129352516
版权

介绍

网上的教程都太乱且大部分都有 BUG 兼容问题，第一次接触的朋友很难实现地图引用和使用。

本篇站在小白的角度，在uniapp小程序/h5网页网站/安卓苹果app/nvue等（全平台完美兼容）开发中，详细实现uniapp全平台都兼容的高德地图引入配置详细流程，还提供了获取用户位置信息等等demo，保证一看就会用！

uniapp Vue3和Vue2都能用，提供详细示例运行代码，新手小白直接复制稍微改下就能使用。

在这里插入图片描述

准备阶段

使用

了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
  • 6
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
订阅专栏
uniapp h5端获取用户的地理位置（高德地图）
qq_42092195的博客
01-19 8028
uniapp H5端获取用户地区位置，兼容微信内置浏览器，第三方为高德地图
记录下uniapp开发结合webview调用高德地图（路线规划，多路选择，双向通信）_uniapp 打车
m0_74918915的博客
04-16 740
对于从来没有接触过网络安全的同学，我们帮你准备了详细的学习成长路线图。可以说是最科学最系统的学习路线，大家跟着这个大的方向学习准没问题。，朋友们如果有需要全套《网络安全入门+黑客进阶学习资源包》，可以扫描下方二维码领取（如遇扫码问题，可以在评论区留言领取哦）~(img-4OoeiWI3-1713282342117)]以扫描下方二维码领取（如遇扫码问题，可以在评论区留言领取哦）~// app 向 web发送消息。因篇幅有限，仅展示部分资料。还有大家最喜欢的黑客技术。
在uniapp做高德地图，发布为h5网页
11-14
在uniapp做高德地图，发布为h5网页，内嵌入安卓app中，代码摘要，不含敏感信息在uniapp做高德地图，发布为h5网页，内嵌入安卓app中，代码摘要，不含敏感信息
uniapp H5/APP端获取用户的地理位置（高德地图）
m0_48985355的博客
01-16 3164
2、在H5 端使用地图和定位相关，需要在 manifest.json 内web配置腾讯或谷歌等三方地图服务商申请的秘钥（key），高德地图(web端key)需要额外配置 securityJsCode 或 serviceHost。（2）【web服务】主要是uniapp H5端不能直接获取 地址信息（仅APP端支持），须先通过uni.getLocation获取经纬度，再通过第三方（高德）逆地理编码（高德逆地理编码）解析出地址信息。2、用浏览器测试，需要打开浏览器的定位服务（本人用的是火狐）；
uniapp获取当前位置和经纬度信息（app端高德地图）
m0_58665272的博客
04-26 1999
在app中，使用高德地图快速获取当前位置信息，获取定位信息
uniapp H5使用高德地图实现点聚合、行政区域高亮（通俗易懂）
qq_56892518的博客
03-27 1760
uniapp自带的map地图组件功能有限，并且适配性实在让人苦恼，高德地图想对成熟稳定且功能比自带map组件完善很多，但是使用较为麻烦，以下是我在uniapp使用高德地图的一些见解和技巧。
【uniapp】 APP&H5端-获取经纬度和地理位置信息（高德地图&腾讯地图）
Minions_Fatman的博客
11-15 2844
在高德地图或腾讯地图开放平台申请key。
微信小程序开发(第二天)-引用高德地图、定位等
梁白开的博客
09-04 3757
如何引用高德地图
uniapp App端使用高德地图
热门推荐
weixin_41558432的博客
02-15 1万+
uni App端使用高德地图
uni-app使用高德地图
Wangreport的博客
07-04 3672
高德地图api的使用
uni-app使用自带map（高德地图），实现定位，撒点，绘制路线，绘制区域
weixin_43972428的博客
03-12 1243
本部分采用自带map组件进行。
基于uni-app的、全端兼容的、高性能UI框架.zip
04-03
基于uni-app的、全端兼容的、高性能UI框架.zip
uniapp scroll-view 横向和纵向滚动 带滚动回调
09-10
Uniapp 平台兼容性 全端支持 引入组件即可
uniapp全端《智能取名》源码
09-03
快速智能取名，并且评分，解译，1.0.0版本 只需修改API接口即可 接口位置:/api/request.js 可以二开自行开发，或直接引用组件。
大转盘抽奖DEMO源码，基于Uniapp框架，兼容小程序，H5和APP
最新发布
05-25
在uniapp 小程序/h5网页网站/安卓苹果app/nvue等（全平台完美兼容）开发中，完成实现九宫格效果抽奖转盘机，丝滑流畅的抽奖体验，可以调用服务端接口确定必中的奖品，自定义概率、奖品项、宫格数量等等！ Vue3和Vue2...
酷丁鱼基于uni-app全端项目综合移动web+移动APP+微信小程序项目.zip
02-11
对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。 【沟通交流】： 有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。 鼓励下载和使用，并欢迎大家互相学习，共同...
uniapp / H5 jssdk 高德地图获取城市信息
feiyu的博客
02-02 634
微信小程序开发，高德地图根据IP获取位置信息，根据经纬度获取位置信息
uniapp：H5定位当前省市区街道信息
sunluyi的博客
07-27 2926
uniapp在H5不能获取到省市区街道信息，使用高德地图api，获取省市区街道信息
uniapp使用高德地图二次开发h5（显示和搜索周边并拿到经纬度和地址名称等）
qq_26711723的博客
09-15 2233
uniapp 使用高德地图二次开发地图，实现搜索周边和显示周边列表可选择（h5版本）
nuxt 高德根据地址解析经纬度
05-25
你可以使用高德地图的 JavaScript API 中的 `AMap.Geocoder` 类来实现地址解析为经纬度。 首先，在你的 Nuxt.js 项目中安装高德地图的 JavaScript API： ```bash npm install @amap/amap-jsapi-loader ``` 然后，在你的 Vue 组件中引入并使用 `AMap.Geocoder` 类： ```vue <template> <div> <input type="text" v-model="address" /> <button @click="search">搜索</button> <div v-if="latitude && longitude"> 纬度：{{ latitude }} 经度：{{ longitude }} </div> </div> </template> <script> import AMapLoader from '@amap/amap-jsapi-loader'; export default { data() { return { address: '', latitude: null, longitude: null, }; }, methods: { async search() { const AMap = await AMapLoader.load({ key: 'YOUR_AMAP_API_KEY', version: '2.0', }); const geocoder = new AMap.Geocoder({ city: '全国', }); geocoder.getLocation(this.address, (status, result) => { if (status === 'complete' && result.geocodes.length) { const { lat, lng } = result.geocodes[0].location; this.latitude = lat; this.longitude = lng; } else { console.error('解析地址失败'); } }); }, }, }; </script> ``` 这里使用了 `@amap/amap-jsapi-loader` 包来动态加载高德地图的 JavaScript API，然后通过 `AMap.Geocoder` 类的 `getLocation` 方法将地址解析为经纬度，并将结果存储在组件的 `latitude` 和 `longitude` 数据中。需要注意的是，在 `AMap.Geocoder` 的构造函数中需要传入一个 `city` 参数，表示解析地址时所在的城市，这里使用了 `全国` 表示在全国范围内解析地址。如果你知道要解析的地址所在的城市，可以将其传入该参数。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

街尾杂货店&

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值