当前位置:首页 > 前端开发 > 微信小程序 > 正文内容

[微信小程序] 获取地理位置

Miao1年前 (2020-04-13)微信小程序1843

一、wx.getLocation(OBJECT)

获取当前的地理位置、速度。当用户离开小程序后,此接口无法调用。开启高精度定位,接口耗时会增加,可指定highAccuracyExpireTime作为超时时间。

属性 类型 默认值 必填 说明
type string wgs84 wgs84 返回 gps 坐标,gcj02 返回可用于wx.openLocation的坐标
altitude string false 传入 true 会返回高度信息,由于获取高度需要较高精确度,会减慢接口返回速度
isHighAccuracy boolean false 开启高精度定位
highAccuracyExpireTime number 高精度定位超时时间(ms),指定时间内返回最高精度,该值3000ms以上高精度定位才有效果
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

示例代码:

wx.getLocation({
    type: "wgs84",
    success (res) {
        console.log(res)
    }
})


等等,好像不是我想要的效果;
这是因为开发者需要获取用户地理位置,所以呢就要告诉用户我们拿地理位置做什么,就是一个用途说明。
那我们按照要求,在app.json里声明permission字段。

"permission": {
    "scope.userLocation": {
        "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
}


这样就ok了,点击确定就可以拿到我们想要的数据了:

参数说明:

  • latitude:纬度,范围为 -90~90,负数表示南纬
  • longitude:经度,范围为 -180~180,负数表示西经
  • speed:速度,单位m/s accuracy:位置的精确度 altitude:高度,单位m
  • verticalAccuracy:垂直精度,单位m(Android无法获取,返回 0)
  • horizontalAccuracy:水平精度,单位m

二、wx.chooseLocation(Object object)

打开地图选择位置。

属性 类型 必填 说明
latitude number 目标地纬度
longitude number 目标地经度
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

这里我们要先使用wx.getLocation获取到经度、纬度,然后给wx.chooseLocation使用就可以了,下面看代码:

wx.getLocation({
    type: "wgs84",
    success(res) {
        wx.chooseLocation({
            latitude: res.latitude,
            longitude: res.longitude,
            success: function(data){
                console.log(data)
            }
        })
    }
})


当我们选中某一个地址,点击确定时,就会返回当前地址的信息:

参数说明:

  • name:位置名称
  • address:详细地址
  • latitude:纬度,浮点数,范围为-90~90,负数表示南纬。使用 gcj02 国测局坐标系
  • longitude:经度,浮点数,范围为-180~180,负数表示西经。使用 gcj02 国测局坐标系

三、wx.openLocation(Object object)

使用微信内置地图查看位置

属性 类型 必填 说明
latitude number 纬度,范围为-90~90,负数表示南纬。使用 gcj02 国测局坐标系
longitude number 经度,范围为-180~180,负数表示西经。使用 gcj02 国测局坐标系
scale number 缩放比例,范围5~18
name string 位置名
address string 地址的详细说明
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)
wx.openLocation({
    latitude: 30.64242,
    longitude: 104.04311,
    name: "武侯区人民政府(武侯祠大街南)",
    address: "四川省成都市武侯区武侯祠大街264号"
})


另外,当我们点击右下角绿色按钮(到这去)时,它会自动调用本地地图,可以直接导航,相当方便。

合理利用可以有很好的效果,比如我们把公司地址放在这里,客户就可以很方便的找到公司位置。

扫描二维码推送至手机访问。

版权声明:本文由Miao发布,版权归作者所有,如需转载请注明出处。

本文地址:https://www.wmlike.com/?id=8

标签: 微信小程序
分享给朋友:

相关文章

[微信小程序] 自定义navigationBar顶部导航栏,兼容适配所有机型(附完整案例)

[微信小程序] 自定义navigationBar顶部导航栏,兼容适配所有机型(附完整案例)

前言navigationBar相信大家都不陌生把?今天我们就来说说自定义navigationBar,把它改变成我们想要的样子(搜索框+胶囊、搜索框+返回按钮+胶囊等)。 思路 隐藏原生样式获取胶囊...

[微信小程序] 参数传递与路径获取

[微信小程序] 参数传递与路径获取

首先在小程序中,所有页面的路由都由框架统一管理。getCurrentPages() 函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。 // 获取加载...

[微信小程序] setData函数详解及注意事项

[微信小程序] setData函数详解及注意事项

前言在微信小程序中经常会使用到setData函数把变量渲染到视图层,那么什么是setData呢?如何使用?注意事项有些什么?下面我们就来详细了解一下! 正文 setData是小程序开发中使用最频繁...

[微信小程序] 开发注意事项、疑问、代码优化

[微信小程序] 开发注意事项、疑问、代码优化

在开发小程序的时候,或多或少都会遇到些问题,也有很多容易被忽略的问题;前端以提升用户体验为主,适当规避问题、优化代码可提升性能,可大大提升用户体验。 注意事项1. 自定义组件自定义组件内wx...

[微信小程序] 获取view宽高度、获取自定义组件宽高度

[微信小程序] 获取view宽高度、获取自定义组件宽高度

一、获取view宽高度给view设置一个id(class)名,用法和jQuery类似,用来获取指定id相关信息。 <view id="test">测试view<...

[微信小程序] 消息提示框

[微信小程序] 消息提示框

前言相比H5弹出框的实现方式要么用插件,要么自己写;微信小程序则提供了几个弹出框api,使用起来更简单、方便;每个api都有不同的使用方式、场景,今天我们就来说说小程序的几种弹出框。 目录 wx....

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。