移动端获取当前位置信息、导航，遇到的问题及解决

Fighting_p

已于 2023-03-27 11:49:20 修改

阅读量1.2k

点赞数

分类专栏：项目问题 JavaScript 文章标签：微信小程序

于 2023-03-15 14:03:24 首次发布

本文链接：https://blog.csdn.net/m0_53562074/article/details/129549492

版权

项目问题同时被 2 个专栏收录

109 篇文章

订阅专栏

JavaScript

36 篇文章

订阅专栏

一、使用微信公众号 SDK 的API：

微信公众号js初始化时 wx.config() 添加获取/查看位置信息（导航）需要的API（getLocation/openLocation）

调API

wx.getLocation({
  // type值：默认为wgs84的 gps 坐标，如果要返回直接给 openLocation 用的火星坐标，可传入'gcj02'
  type: 'gcj02', //返回可以用于wx.openLocation的经纬度
  success (res) {
    console.log('获取当前位置信息 getLocation res----', res)
    const latitude = res.latitude
    const longitude = res.longitude
    wx.openLocation({
      latitude,
      longitude,
      scale: 18,
      name: '测试地址名', // 位置名
      address: '测试地址详细说明', // 地址详情说明
    })
  }
})

二、脱离微信实现导航：

实现 - 有不足

window.open(`https://uri.amap.com/marker?position=120.21,32.21&name=${'测试-目的地'}`) // position=经度,纬度 name=目的地名

使用 window.open(‘高德地图地址’) 可以打开高德地图（不是打开APP是打开网页），但是这样的话会有一个问题：打开高德地图之后 没有起点坐标 和起点位置名，虽然高德会自动获取当前位置，但也有失败的情况。

解决：我们自己获取起点坐标然后打开高德地图地址的时候带上参数。

使用高德地图获取当前位置信息：

引入高德地图地址、配置key和安全密钥
```
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=1cbf5fe26d6e1c945329abcdbd1dd332"></script>
<script type="text/javascript">
  window._AMapSecurityConfig = {
    securityJsCode:'c47fbc9c6f4a91be27dc0c5b058a2d49', // 秘钥
  }
</script>
```
【注意】之前只需要有key就可以，现在需要key和秘钥同时配置。

引入文件、秘钥配置参考官网手册：https://lbs.amap.com/api/javascript-api/guide/abc/prepare

key值和秘钥需要自己在高德开放平台获取https://console.amap.com/dev/key/app
页面中放一个方地图的容器（该容器不需要宽高）
```
<View id='MapContainer'></View>
```

获取当前位置信息

componentDidMount () {
  /**** 当前位置获取 ****/
  const that = this
  const mapObj = new AMap.Map('MapContainer');
  mapObj.plugin('AMap.Geolocation', function () {
    const geolocation = new AMap.Geolocation({
      enableHighAccuracy: true, //是否使用高精度定位，默认:true
      timeout: 10000,        //超过10秒后停止定位，默认：无穷大
      maximumAge: 0,         //定位结果缓存0毫秒，默认：0
      convert: true,         //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
      showButton: true,     //显示定位按钮，默认：true
      buttonPosition: 'LB', //定位按钮停靠位置，默认：'LB'，左下角
      buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
      showMarker: true,   //定位成功后在定位到的位置显示点标记，默认：true
      showCircle: true,   //定位成功后用圆圈表示定位精度范围，默认：true
      panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
      zoomToAccuracy:true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
    });
    mapObj.addControl(geolocation);
    // geolocation.getCurrentPosition();
    // AMap.Event.addListener(geolocation, 'complete', (res) => {
    //   console.log('获取当前位置信息 res----', res)
    //   that.setState({ currentPoint: { ...result } })
    // }); //返回定位信息
    // AMap.Event.addListener(geolocation, 'error', (err) => {
    //   console.log('获取当前位置信息 err----', err)
    //   that.setState({ currentPoint: { } })
    // }); //返回定位出错信息

    geolocation.getCurrentPosition((status, result) => {
      console.log('status 000----', status)
      console.log('result 000----', result)
      if (status === 'complete') {
        that.setState({ currentPoint: { ...result } })
      } else { that.setState({ currentPoint: { } }) }
    })
  });
}

打开高德地图

window.open(`https://uri.amap.com/navigation?from=${currentPoint.position.lng},${currentPoint.position.lat},${'我的位置'}&to=120.21,32.21,目的地`) // to的值为后端返回数据<经度,纬度,目的地名> 此处数据为测试数据

【报错】

在这里插入图片描述

【百度原因】

https://lbs.amap.com/faq/js-api/map-js-api/position-related/43361

Geolocation permission denied：用户禁用了定位权限，需要用户开启设备和浏览器的定位权限，并在浏览器弹窗中点击“允许使用定位”选项。

Geolocation permission denied：浏览器禁止了非安全域的定位请求，比如Chrome、IOS10已陆续禁止，这时候需要升级站点到HTTPS。注意Chrome不会禁止localhost等域名HTTP协议下的定位

【报错解决】

不存在百度的问题，更新到线上就好了

高德定位失败反馈工单

https://lbs.amap.com/faq/basis/location/43338

总结

部分 ios 机型可能出现获取不到当前位置信息的情况，解决：

打开手机设置中定位权限
打开手机设置中微信定位权限
打开公众号获取定位权限

如果以上三步都执行了，还是不能获取到当前位置信息（没有执行 geolocation.getCurrentPosition() 方法），尝试打补丁：
参考代码：view-source:https://a.amap.com/jsapi_demos/static/remogeo/remo.html

// 1.引入需要用到的js文件 https://a.amap.com/jsapi_demos/static/remogeo/remogeo.js（最好下载在本地使用不要直接引用线上的地址）
<script type="text/javascript" src="./remogeo.js"></script>
// 2.判断如果是 ios 环境，替换定位代码为远程获取定位的代码
// ios环境切换到使用远程https定位
if (AMap.UA.ios && document.location.protocol !== 'https:') {
    //使用远程定位，见 remogeo.js
    var remoGeo = new RemoGeoLocation();
    //替换方法
    navigator.geolocation.getCurrentPosition = function() {
        return remoGeo.getCurrentPosition.apply(remoGeo, arguments);
    };
    //替换方法
    navigator.geolocation.watchPosition = function() {
        return remoGeo.watchPosition.apply(remoGeo, arguments);
    };
}

ios / Android 分别打开 补丁demo 的 http / https 链接
http 开头的 demo 链接：http://a.amap.com/jsapi_demos/static/remogeo/remo.html
https 开头的 demo 链接：https://a.amap.com/jsapi_demos/static/remogeo/remo.html

iOS/Android	http链接	https链接
iOS	定位失败	第一次定位成功，然后一直定位失败（或者一直定位失败）
Android	定位失败	定位成功（偶尔不成功）

在这里插入图片描述

如果打了补丁也不能定位成功，则无法解决，可能是部分手机还有别的定位设置？不清楚……

三、【补充】使用window中方法获取当前位置信息（未试）

代码：

window.navigator.geolocation.getCurrentPosition(
  function (position) {
    console.log('window获取 position----', position)
  },
  function (err) { console.log('window获取 err----', err) }
)

本地项目运行，在微信开发者工具中获取定位报错：
在这里插入图片描述

线上获取（移动端coords这里的…点不开，无法确定是不是图片左侧数据）：
在这里插入图片描述

四、【补充】使用Taro的API，报错

Taro.getLocation({
  type: 'wgs84',
  success: function (res) {
    const latitude = res.latitude
    const longitude = res.longitude
    const speed = res.speed
    const accuracy = res.accuracy
  }
})

Taro.getLocation({
  type: 'gcj02', //返回可以用于 Taro.openLocation的经纬度
  success: function (res) {
    const latitude = res.latitude
    const longitude = res.longitude
    Taro.openLocation({
      latitude,
      longitude,
      scale: 18
    })
  }
})