微信小程序的定位功能的实现

定位功能的实现

定位功能的思路：

      1.使用小程序，获取经纬度2.使用腾讯地图sdk逆地址解析坐标3.将解析来的地址，渲染到页面

解决方法：

使用腾讯地图sdk逆地址解析坐标

找到官网：

https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview

申请密钥
开通webserviceAPI服务：控制台 -> key管理 -> 设置（使用该功能的key）-> 勾选webserviceAPI -
(小程序SDK需要用到webserviceAPI的部分服务，所以使用该功能的KEY需要具备相应的权限)
下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.2
下载的js文件放在utils文件里面

- 引入qqmap-wx-jssdk- 解决mpvue不支持 commonjs规范- 修改`.babellrc`文件，plugins添加`"transform-es2015-modules-commonjs"`

"plugins": ["transform-runtime","transform-es2015-modules-commonjs"]

微信小程序稳定中进行安全域名设置，在“设置” -> “开发设置”中设置request合法域名，添加https://apis.map.qq.com

小程序实例

<span @click="goToCity" class="area_name">{{address}}</span>data() {return {address:'加载中...'};},

点击实现跳转页面的功能
先引入：

const db = wx.cloud.database();

在methods中写点击跳转：

methods: {goToCity(){wx.navigateTo({url:"/pages/city/main"});} },

实现定位功能：

app.json配置permission字段

"pages": ["pages/index/index"],"permission": {"scope.userLocation": {"desc": "你的位置信息将用于小程序位置接口的效果展示" // 高速公路行驶持续后台定位}}

 onLoad(){wx.getLocation({type: 'wgs84',success :(res) => {console.log(res);//获取到经纬度值qqmapsdk.reverseGeocoder({//位置坐标，默认获取当前位置，非必须参数//Object格式location: {latitude: res.latitude,longitude: res.longitude},//成功后的回调success: r =>{console.log(r.result.address_component);let citty = r.result.address_component.citythis.address = citty}});}
})},

微信小程序的定位功能的实现相关推荐

微信小程序原生开发功能合集一：微信小程序开发介绍
一.专栏介绍本专栏主要内容为微信小程序常用功能开发过程的介绍说明,包括开发微信小程序常用组件的封装.常用功能的开发等,提供源代码.开发过程讲解视频.完整的课程等. 组件封装: 下拉选择组件. ...
python玩微信小程序游戏_使用python实现微信小程序自动签到功能
功能描述目标完成多账号微信小程序每天自动签到输出签到成功则向微信群发送签到成功的信息否则提示用户签到失败,需手动签到包管理 requests itchat time threading 程序 ...
微信小程序-000-签到功能-004-新建签到
微信小程序-000-签到功能-004-新建签到-2020-4-23 目录一.wxml 二.js pages.newact.newact 一.wxml <form bindsubmit=&quo ...
黯然微信小程序杂记（三）：微信小程序实现倒计时功能附讲解教学附源码
黯然微信小程序杂记(三):微信小程序实现倒计时功能附超详细注释附源码一.功能描述二.界面展示三.test.wxml代码四.test.js代码(注释很详细很易懂) CSDN私信我,有关微信 ...
微信小程序实战购物车功能
代码地址如下: http://www.demodashi.com/demo/12400.html 一.准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.com ...
微信小程序实现语音识别功能
原标题:微信小程序实现语音识别功能使用小程序实现语音识别功能,由于语音识别可以直接使用各厂家的API接口,并且小程序为腾讯所有,因此考虑到可能的低延时,采用了腾讯提供的免费API接口,准确讲是腾讯语 ...
微信小程序语音识别java_微信小程序实现语音识别功能
原标题:微信小程序实现语音识别功能使用小程序实现语音识别功能,由于语音识别可以直接使用各厂家的API接口,并且小程序为腾讯所有,因此考虑到可能的低延时,采用了腾讯提供的免费API接口,准确讲是腾讯语 ...
微信小程序拼团功能页面展示
微信小程序拼团功能页面展示一.拼团功能拼团就是让消费者在优惠价格的吸引下,自发邀请好友组团,以优惠的价格购买商品的促销活动二.拼团功能的作用 1.与纯粹的购物相比,这种营销方式迎合了大多数用户的 ...
IVX低代码平台开发——微信小程序实现抽奖功能
写在前面通过利用可视化编程实现微信小程序的抽奖功能,带大家初步了解 iVX 的强大之处. 文章目录写在前面 iVX开发抽奖功能实现 iVX开发基本介绍 iVX是一个 "零代码&quo ...

微信小程序的定位功能的实现

定位功能的思路：

解决方法：

使用腾讯地图sdk逆地址解析坐标

小程序实例

微信小程序的定位功能的实现相关推荐

最新文章

热门文章