现在使用获取地图,不需要再去安装sdk,只需要和我一样执行下方代码可以解决问题(这里会从先获取经纬度,再到经纬度转成具体的地址,最后补充定位当前位置),并且当中会提及到很多,自己开发的时候踩过的坑,谢谢

一、获取经纬度及问题

首先使用uni-App获取经纬度

uni.getLocation({type: 'wgs84 ',success(res) {console.log(res.longitude)console.log(res.latitude)}})

很多使用上面这串代码还是获取不到经纬度,或者是会报错,下面首先提供方案:

①遇到上述这种情况,就是你没有获取定位的权限,所以需要在app.json文件中去写入下面这代码

(在uni中设置app.json就是在箭头所示处)

在下面添加这样permission的代码就可以使用了,代码我给放下面()

"permission" : {"scope.userLocation" : {"desc" : ""}}

这里有desc这个东西,主要是用来写你获取这个定位权限是用来干嘛的

②上述操作做完后,还是没有获取到经纬度的,执行

这个给他勾选上,我自己是遇到了这两种问题,有其余问题的 可以在评论区,我给解答,这样再执行获取经纬度的代码就可以获取到具体的经纬度值了

这是官网给的参数这些,需要获取其他的,自取

uni-app位置

二、将经纬度逆转码转为具体位置

这里我们需要使用高德地图的来转码,但是不用下载sdk,看操作

首先,自己去高德地图网站申请一个key,下面是如何获取key

高德地图获取key

这里有个坑,就是想着我们是开发微信小程序,所以申请的key也是小程序的,但后面就会发现暂时是调试不了的,真机调试是可以的,所以我们也需要申请一个web端的key

这里需要注意:是web服务!!不然也会报错,具体的报错码,可以去官网查看错误码是什么原因,我给放下面了,具体其他问题再去解决

官网错误码

创建完key后,下面就是怎么使用了,只需要发起一个请求就可以轻松解决

uni.request({url: 'https://restapi.amap.com/v3/geocode/regeo',method: 'GET',data: {location: res.longitude + ',' + res.latitude,key: '把自己的key复制过来'},success(resdata) {console.log(resdata.data.regeocode.formatted_address)})

这串代码需要上面的获取到的经纬度,所以在上一串代码中的success的函数中放入这个请求,就可以了

注意:

①启动失败的,去查看自己的错误码

②如果爆红了,就是你还没开启高德的定位,在manifest.json中打开后,把该勾的勾上,填写和刚刚一样的key,就可以解决获取具体的位置信息了

成功拿到数据!!!

三、数据正确了,地图还没动

当现在我们能拿到当前我们位置的数据了,但是还没地图,或者有地图的,还没定位到自己的位置在哪儿的,这样就需要我们继续操作了

使用map标签就可以显示一个地图,默认给显示到北京了

下面将会把地图定位到我们当前的位置

首先给map标签一个id(id = "mymap")

如果我们想要一加载页面就自动定位到当前的位置,我们就需要将其放在monted钩子函数里面,因为还是需要我们的经纬度,所以尽量的封装好获取经纬度的方法,或者将其放在success中得到经纬度

然后执行

let map = uni.createMapContext("mymap")
map.moveToLocation(longitude, latitude)

第一行就是将我们刚刚声明的id和其绑定起来方便操作,第二行就是移动的,将经纬度传给这个方法就可以了

注意!!!

①这里在官网是明确声明了,我们需要将其参数声明show-location="true",所以光执行上述代码,还是没用声明就可以执行了,现在的map标签就成这样的

<map id="mymap" show-location="true"></map>

这样就解决了获取地图中的address和地图定位的问题,感谢大家!有问题的,欢迎评论区质问

uni-App获取地图address与高德地图API配合相关推荐

  1. 高德地图哪个语音包最好_高德地图app怎么录制语音包?高德地图将自己的语音用作导航语音包的方法介绍...

    高德地图是一款中国专业的手机地图,拥有全面的地点信息,特色语音导航.智能路线规划,是我们常用的一款移动地图导航工具,用高德地图语音导航,可以听到很多明星的导航语音播报,当然你也可以自己录制语音包.那么 ...

  2. js 跳转到指定位置 高德地图_JS引入高德地图定位

    在此记录一下X项目使用高德地图的思路高德地图(X项目前端框架是Jquery) 2准备工作(封装方法,以便直接调用) -2.2封装超时方法($.timeOut-参考) -2.3封装异步调用地图的方法 / ...

  3. 项目 - Web地图开发【高德地图API】(一)

    导航兔: Web地图开发 [高德地图API] 导航地址 Web地图开发[高德地图API](一) https://qianmoer.blog.csdn.net/article/details/12842 ...

  4. 项目 - Web地图开发【高德地图API】(二)

    导航兔: Web地图开发 [高德地图API] 导航地址 Web地图开发[高德地图API](一) https://qianmoer.blog.csdn.net/article/details/12842 ...

  5. java 地图坐标转换_百度地图坐标和高德地图坐标转换代码 Java实现

    最近做项目需要百度地图坐标转换到高德地图坐标,高德官方也给出了转换接口(百度地图也给出了转换接口) http://lbs.amap.com/api/javascript-api/reference/l ...

  6. 高德地图学习---在高德地图图层上使用google的卫星图

    公司要做一个项目要用到卫星图,但是高德地图提供的卫星图有很多地方由于权限问题还有等等一系列问题是显示不全的,拉到比较偏远的地方就显示不了了,而且清晰度也不够,研究了一下并且在网上查看了好多文章之后发现 ...

  7. 小程序 获取当前城市位置-高德地图

    微信小程序 wx.getLocation 只能获取到经纬度,想要获取具体城市信息,需要使用地图插件.公司要求使用 高德地图,在使用上,几个地图的代码步骤都差不多. 目录 1. 查看官方文档 1.1 申 ...

  8. ios 持续获取定位 高德地图_iOS 定位 高德地图

    最近项目中有需求需要使用定位,上报经纬度和地址信息,还有可以在地图界面随意选择地点,因为和后台经纬度匹配的问题,所以选择了高德地图(百度地图经纬度是有自己算法的). 1.定位 iOS定位SDK提供后台 ...

  9. 记录uni.app开发微信小程序中地图的使用,以及项目中的解决办法

    标题先讲一下需求:需要获取用户的地址信息以及经纬度,并在地图中展示时出来 uniapp官方也提供了api uni.getLocation(OBJECT) getLocation只能获取用户的经纬度,不 ...

最新文章

  1. oracle查询不走索引全表扫描,使用索引快速全扫描(Index FFS)避免全表扫描的若干场景-Oracle...
  2. [译] ASP.NET 生命周期 – ASP.NET 上下文对象(六)
  3. rocketmq python 一个进程订阅多个topic_玩转不同业务场景,这些RabbitMQ特性会是得力助攻...
  4. android模拟器越狱,关于iOS Simulator(模拟器)是否可以越狱。
  5. java中pc寄存器的作用是什么_既然有PC寄存器,栈帧里的返回地址的作用是什么?...
  6. 分割点云数据_3D点云深度学习综述:三维形状分类、目标检测与跟踪、点云分割等...
  7. group_concat默认长度限制
  8. Discuz!NT 缓存设计简析 [原创]
  9. 统计通话次数和时间的软件_通话时间统计app下载|通话时间统计安卓版下载 v1.0.3 - 跑跑车安卓网...
  10. 【知识导图】数据结构与算法
  11. WinDBG 技巧:如何生成Dump 文件(.dump 命令)
  12. 华为 5G 折叠屏手机获入网许可;苹果召回部分 MacBook Pro;Oracle Linux 8.0 发布 | 极客头条...
  13. ANT的环境搭建和开发
  14. 【信号与系统|吴大正】2:连续系统的时域分析
  15. ubuntu系统下mysql重置密码和修改密码操作
  16. 终极卸载PC奇安信天擎
  17. 对接企业支付宝的流程(电脑和手机)
  18. HTML5期末大作业:漫画网站设计——布卡漫画官网(4页) HTML+CSS+JavaScript 学生DW网页设计作业成品 w学生原创课程设计漫画设计制作大作业成品免费下载
  19. 解决 rsync: failed to connect to xxx.xxx.xxx.85 (xxx.xxx.xxx.85): No route to host (113) 问题
  20. 2018计算机二级c语言通过率,计算机二级各科通过率是多少

热门文章

  1. GAGE Razor系列PCI/PCIe采集卡
  2. 公众号怎么设置滑动文字_如何制作文字或者几张图片的滑动?
  3. 【获奖公布】 |新年新目标,立Flag的时候又到了
  4. DTD与XML的关系
  5. Bootstrap框架----单张图片上传实现---Uploadify插件
  6. 【图像处理基础】C语言对bmp图片进行处理
  7. 【git】(task1)git基础和常用命令
  8. 远程登陆路由器和交换机
  9. 用Android studio写一个轮播图代码
  10. Java版我的世界有什么特性_Java版提及特性 _ 《我的世界》中文Minecraft Wiki:最详细的官方我的世界百科...