(2023进阶版）vue+h5 通过高德地图（原生）获取当前位置定位

前言：因为也是用的上一个版本的代码，为了描述清楚所以就直接复制文章来更改了，这一版更加完善简洁，高德地图精确度也更高
(2021年写过的一版上线了挺长时间，2023年突然被应用市场下架，说流程走不通，就卡在获取定位失败。改了之后已上线运行

经抓包发现，在本地、测试、预生产环境，利用经纬度获取地点这一块，发起了api请求https://restapi.amap.com/v3/geocode/regeo?key=。可正常返回地点信息，按照代码逻辑走
正式环境，会将https://restapi.amap.com/v3/geocode/regeo?key= 直接被替换这个链接restapi.amap.com/v3/assistant/coordinate/convert?key= regeo根本没请求，所以后续代码逻辑走不通

项目需求是：获取到当前城市定位，然后显示该城市的服务项
之前做了一版百度地图，因为商业原因，公司选择了高德地图，所以要对地图进行更换。百度地图原生点这里
也不算顺利，之前做的记录都不存在了。
vue-amap是基于高德原生封装好的供vue使用，对图层的操作会更便捷一些。vue-amap点这里
上一版高德地图原生js指路

当前的需求，只需拿到当前定位。所以可以使用原生js

1.index.html文件

用cdn引入

 <script  type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=你的key&plugin=AMap.Geolocation"></script>

2.vue.config.js文件

将cdn引入vue项目里

 externals: {// 'BMap':"BMap",AMap: 'AMap', // 高德地图配置AMapUI: 'AMapUI'}

3.使用的页面设置

不用设置 import AMap form’AMap’
踩得最大的坑就是这个，不晓得为什么网上这多人引入
一会‘AMap’ is not defined
一会出现 To install it, you can run: npm install --save AMap
光是为解决出现的引入问题就花了大半时间
尤其与之对应的 .getCurrentPosition方法更是花样报错，把所有报错轮了一遍。有博主说是在https环境下才能获取成功
（更新）：融合了HTML5 Geolocation定位接口、精确IP定位服务，以及安卓定位sdk定位。定位流程如下：
开发者开启了sdk辅助定位，安卓手机上会优先尝试调用sdk的定位接口，
失败之后优先调用浏览器原生定位接口进行定位
浏览器定位失败之后尝试进行精确IP定位
IP定位获取当前城市定位

前文也说了，高德地图进行升级了，定位失败率降低，则思路如下：

上一版通过定位拿到城市边缘经纬度再去请求城市中心这个操作只作为备用选项，为了防止失败。
如果获取不到精确定位会返回状态码error，则在error情况下，进行城市信息获取
如果获取到定位则直接进行业务逻辑编写
新增了 needAddress 属性，当定位成功，可以获取返回定位信息。相应的信息也要处理。该属性藏得很深，反正找到了两份不同的文档吧

 getAmap(){const that = this;AMap.plugin("AMap.Geolocation", () => {var geolocation = new AMap.Geolocation({// 是否使用高精度定位，默认：trueenableHighAccuracy: true,//是否使用安卓定位sdk用来进行定位，需要安卓端sdk配合useNative: true,// 设置定位超时时间，默认：无穷大timeout: 10000,needAddress : true,});geolocation.getCurrentPosition((status, result) => {  //获取用户当前的精确位置if (status == "complete") {let data=result.addressComponent //重点：设置了needAddress属性 定位返回的信息回包含addressComponent对象，里面返回的内容跟regeo请求返回addressComponent 对象一致。if(data.adcode){//业务逻辑代码}else {that.surePosition(result.position[0],result.position[1]) //防止返回信息不同}else {geolocation.getCityInfo((status, result) => {   //只能获取当前用户所在城市和城市的经纬度if (status == "complete") {//业务逻辑代码}else {that.showCity = '未获取定位'}})}})})},

4.进行api请求

获取到了大致经纬度与城市，最好再一次进行逆地址编码请求
逆地址编码请求结果更详细更确定城市地址。
extensions=all可以不设置，但设置了会获得地标信息商圈这种信息

surePosition(re0,re1){const that = this;let key='你的key'axios.get(`https://restapi.amap.com/v3/geocode/regeo?key=${key}&location=${re0+','+re1}&extensions=all`).then( (response) => {console.log('response'+response.data)if(response.data.status){//业务逻辑代码} else {that.showCity = '未获取定位'}}})},

(2023进阶版）vue+h5 通过高德地图（原生）获取当前位置定位相关推荐

关于h5使用高德地图,没有获取经纬度
说明: 这个记录只用于自己记录查看, 但你实在没有方法去解决也可以去尝试一下嘛正在更新记录中关于h5使用高德地图,获取不到经纬度情况一: 可能需要配置https
java获取经纬度_java调用高德地图api获取某个位置的经纬度
java调用高德地图api获取经纬度的方法,废话少说,直接上代码: import com.fasterxml.jackson.databind.JsonNode; import com.ning.ht ...
高德地图API获取当前位置对应的周边信息
一.前言当前公司开发计划做一个打卡功能,获取用户信息地理信息后,提供列表给客户选择打卡地点(200米范围内).自己今天对三家地图开放者平台文档进行了查看比较(腾讯.百度.高德),目前实现的方法采用的 ...
Android 高德地图key获取、坐标定位
前期准备点击进入高德平台获取key **步骤一:**登录注册进入控制台步骤二: **步骤三:**获取sha1值,以及其包名. **步骤四:**获取sha1值步骤五:复制获取到key值到这前期工 ...
高德地图自动获取当前位置可搜索可拖拽获得GPS和道路信息
实现思路: 获取当前的ip所在位置设置中心点,根据组件获取当前信息,搜索跳转到搜索的中心点 AMap.Geolocation(获取当前ip定位) misc/PositionPicker(组件获取当前 ...
C# 调用高德地图API获取经纬度以及定位，JS获取定位【万字详解附完整代码】
最近有个需求,需要用到定位,本来打算用百度地图API定位,但是发现百度地图定位申请AppKey太麻烦了.因为是写的web端,百度地图定位API申请的Appkey需要网址过滤.索性就用高德定位了(有一说 ...
vue中基于高德地图，获取省级地图（以安徽为例）
效果图展示 <template><div><div id="mapId" class="rescure-map"></ ...
高德地图准确获取当前位置信息
代码示例 JavaScript mapObj = new AMap.Map('iCenter'); mapObj.plugin('AMap.Geolocation', function () {geo ...
vue项目中通过百度地图API获取当前位置定位
1.申请自己的Ak(密钥) 百度地图开发平台登录后到控制台,然后创建应用,选择对应的配置创建成功后复制对应的AK就行(注意:创建过程中需要注意应用类型) 2. 创建一个map.js 里面写此代码需 ...

(2023进阶版）vue+h5 通过高德地图（原生）获取当前位置定位

1.index.html文件

2.vue.config.js文件

3.使用的页面设置

4.进行api请求

(2023进阶版）vue+h5 通过高德地图（原生）获取当前位置定位相关推荐

最新文章

热门文章

(2023进阶版）vue+h5 通过高德地图（原生） 获取当前位置定位

1.index.html文件

2.vue.config.js文件

3.使用的页面设置

4.进行api请求

(2023进阶版）vue+h5 通过高德地图（原生） 获取当前位置定位相关推荐

最新文章

热门文章

(2023进阶版）vue+h5 通过高德地图（原生）获取当前位置定位

(2023进阶版）vue+h5 通过高德地图（原生）获取当前位置定位相关推荐