最近刚开始接触微信小程序,在弄懂其结构以及相关接口之后,准备着手实现一个小程序,功能包括--获取用户当前位置的经纬度,在地图上查看位置,通过地图获取不同位置的经纬度。
- 微信小程序的主体部分包括:
app.js:必填,小程序逻辑,由js代码写成;
app.json:必填,小程序公共设置,页面配置、滚动条、标题的显示等等;
app.wxss:非必填,公共样式表,即css;
app.wxml:非必填,模板文件。
新增页面需要在app.json进行配置:
"pages":[
"pages/index/index",
"pages/location/location",
"pages/logs/logs"
]
- 通过在视图层调用bindtap与逻辑层中的方法匹配--实现页面跳转:
视图层
<view class="location" bindtap="locationViewTap">
<button>获取用户当前位置</button>
</view>
逻辑层
locationViewTap: function(){
wx.navigateTo({
url: '../location/location'
})
}
- 通过在视图层调用bindtap与逻辑层中的方法匹配--实现方法调用:
视图层
<button bindtap="mapViewTap" style="margin:10px">查看地图</button>
<button bindtap="chooseMapViewTap" style="margin:10px">选择位置</button>
逻辑层
mapViewTap:function(){
wx.getLocation({
type: 'gcj02', //返回可以用于wx.openLocation的经纬度
success: function(res) {
console.log(res)
wx.openLocation({
latitude: res.latitude,
longitude: res.longitude,
scale: 28
})
}
})
}
- 有关地图位置的三个接口:
(1) wx.getLocation(OBJECT) 获取当前的地理位置、速度
success返回参数:
latitude | 纬度,浮点数,范围为-90~90,负数表示南纬 |
longitude | 经度,浮点数,范围为-180~180,负数表示西经 |
speed | 速度,浮点数,单位m/s |
accuracy | 位置的精确度 |
(2) wx.openLocation(OBJECT) 使用微信内置地图查看位置
OBJECT参数说明:
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
latitude | Float | 是 | 纬度,范围为-90~90,负数表示南纬 |
longitude | Float | 是 | 经度,范围为-180~180,负数表示西经 |
scale | INT | 否 | 缩放比例,范围5~18,默认为18 |
name | String | 否 | 位置名 |
address | String | 否 | 地址的详细说明 |
success | Function | 否 | 接口调用成功的回调函数 |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
(3) wx.chooseLocation(OBJECT) 打开地图选择位置
success返回参数:
name | 位置名称 |
address | 详细地址 |
latitude | 纬度,浮点数,范围为-90~90,负数表示南纬 |
longitude | 经度,浮点数,范围为-180~180,负数表示西经 |
- 实现效果
利用getLocation获取当前位置的经纬度坐标
openLocation打开微信内置地图查看
利用chooseLocation选取位置,并将位置信息的经纬度实时响应显示
实时显示经纬度:
注意事项:
(1) 利用getLocation()获得的地图参数信息只有两个
利用chooselocation返回的参数如下:
(2) this.setData修改json里面的值
逻辑层中的json数据可以通过WXML文件{{json}}显示出来:
微信小程序之获取当前位置经纬度以及地图显示的更多相关文章
-
微信小程序之获取用户位置权限(拒绝后提醒)
微信小程序获取用户当前位置有三个方式: 1. wx.getLocation(多与wx.openLocation一起用) 获取当前的精度.纬度.速度.不需要授权.当type设置为gcj02 返回可用于w ...
-
在微信小程序中将获取到的经纬度(经度纬度)转地址(地名)
var QQMapWX = require('qqmap-wx-jssdk') var qqmapsdk = new QQMapWX({ key: '填写你的key' // 必填 }) wx.getL ...
-
【微信小程序】获取用户地理位置权限,二次请求授权,逆解析获取地址
摘要:微信小程序内获取用户地理位置信息授权,被拒绝后二次获取,获取权限后逆解析得到用户所在省市区等.. 场景:商城类小程序,在首页时需展示附近门店,即用户刚进入小程序时就需要获取到用户位置信息 ste ...
-
微信小程序如何获取openid
微信小程序如何获取openid wx.login({ success: res => { // 发送 res.code 到后台换取 openId, sessionKey, unionId // ...
-
微信小程序验证码获取倒计时
wxml <button disabled='{{disabled}}' bindtap="goGetCode">{{code}}</button> js ...
-
微信小程序后台获取用户的opeid
1.微信小程序后台获取登录用户的openid,首先微信小程序将code传给后台服务器 wx.login({ success: function (res) { var code = res.code ...
-
微信小程序,获取二维码
微信小程序,获取二维码 找到一篇很实用的博客,他已经写得很详细了,自己也懒得写,亲测有效 参考网址
-
nodejs+koa+uniapp实现微信小程序登陆获取用户手机号及openId
nodejs+koa+uniapp实现微信小程序登陆获取用户手机号及openId 前言: 我准备用nodejs+koa+uniapp实现一款餐饮点单小程序,以及nodejs+koa+vue实现后端管理 ...
-
uniapp的微信小程序,获取授权,获取中文街道地理位置
w问题描述:在微信小程序模拟器上运行获取坐标时 获取不到信息,原因是 没有调起默认地理位置: 解决办法:或者在manifest.json的源码视图中配置:配置appid和地理位置 默认弹起获取地理位置 ...
随机推荐
-
Java ConcurrentHashmap 解析
总体描述: concurrentHashmap是为了高并发而实现,内部采用分离锁的设计,有效地避开了热点访问.而对于每个分段,ConcurrentHashmap采用final和内存可见修饰符Volat ...
-
Android - Get Bluetooth UUID for this device
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join th ...
-
深入java虚拟机学习 -- 类的加载机制(四)
类加载的命名空间 每个类加载器都有自己的命名空间,命名空间由所有以此加载器为初始类加载器的类组成,不同命名空间的两个类是不可见的,但只要得到类所对应的Class对象的refrence(反射),还是可以 ...
-
国产多维数据库 NeuralCube!中国人自己的大数据底层核心技术!
商业转载请联系作者获得授权,非商业转载请注明出处. 提到‘数据库’,首先被想到的肯定是Oracle.DB2.SQL Server.MySql这些传统的关系型数据库.数据库的概念是非常宽泛的,除了上述的 ...
-
MFC中关于运行时类信息及动态创建对象的两个宏的意义(转)
http://blog.csdn.net/ligand/article/details/49839507 MFC运行时类信息 用途: 程序在运行时,获取对象类的信息及类的继承关系 实现: 1.定义的类 ...
-
To be better —msup荣获平安科技“2018年度优秀合作伙伴”称号
2018年12月4日,平安科技在深圳平安金融中心举办了“2018年平安科技优秀培训合作伙伴交流会”,msup收到了邀请参与此次评选,并从80余家合作伙伴中脱颖而出,在交付量.满意度.师资内容.服务水准 ...
-
Android so 文件进阶<;三>; so文件的简单加密
0x00 前言 之前的两篇文章从链接视图和执行视图分析了elf文件的大致结构,这篇文章主要内容是对于so文件进行简单的加密工作,针对Ida等静态分析工具的分析,一旦开始动态调试就应该很容易就可以du ...
-
手机浏览器_安卓_苹果手机Webview 中唤醒APP
Url scheme是iOS,Android平台都支持,只需要原生APP开发时注册scheme, 那么用户点击到此类链接时,会自动跳到APP.比如 <!-- 打开考拉APP首页 --> & ...
-
python 工具 eclipse pydev工具安装。
1.下载eclipse 2.下载java jre(这个会在运行eclipse的时候提示你下载,,根据系统型号下载就行) 3.下载完jre后,把目录下javaw.exe的路径添加到系统path环境变量中 ...
-
【转载】Redis Sentinel 高可用服务架构搭建
作者:田园里的蟋蟀 出处:http://www.cnblogs.com/xishuai/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接. 阅读 ...