微信小程序之获取当前位置经纬度以及地图显示详解


Posted in Javascript onMay 09, 2017

最近刚开始接触微信小程序,在弄懂其结构以及相关接口之后,准备着手实现一个小程序,功能包括--获取用户当前位置的经纬度,在地图上查看位置,通过地图获取不同位置的经纬度。

微信小程序的主体部分包括:

微信小程序之获取当前位置经纬度以及地图显示详解

新增页面需要在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}}显示出来:

微信小程序之获取当前位置经纬度以及地图显示详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
最新优化收藏到网摘代码(digg,diigo)
Feb 07 Javascript
Jquery中删除元素的实现代码
Dec 29 Javascript
从零学jquery之如何使用回调函数
May 16 Javascript
2则自己编写的jQuery特效分享
Feb 26 Javascript
jquery实现的树形目录实例
Jun 26 Javascript
JavaScript实现向右伸出的多级网页菜单效果
Aug 25 Javascript
微信小程序 网络API 上传、下载详解
Nov 09 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
Dec 02 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
Jan 24 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
Oct 16 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
Jul 04 Javascript
vue路由切换之淡入淡出的简单实现
Oct 31 Javascript
JS中的数组转变成JSON格式字符串的方法
May 09 #Javascript
jQuery插件开发发送短信倒计时功能代码
May 09 #jQuery
JavaScrpt的面向对象全面解析
May 09 #Javascript
ES6正则表达式的一些新功能总结
May 09 #Javascript
Vuex和前端缓存的整合策略详解
May 09 #Javascript
基于JS实现限时抢购倒计时间表代码
May 09 #Javascript
js使用i18n实现页面国际化的方法
May 09 #Javascript
You might like
在Laravel框架里实现发送邮件实例(邮箱验证)
2016/05/20 PHP
浅谈PHP中静态方法和非静态方法的相互调用
2016/10/04 PHP
thinkphp5 模型实例化获得数据对象的教程
2019/10/18 PHP
在 Laravel 中动态隐藏 API 字段的方法
2019/10/25 PHP
javascript 学习之旅 (1)
2009/02/05 Javascript
node.js微信公众平台开发教程
2016/03/04 Javascript
javascript原生ajax写法分享
2016/04/10 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
2016/08/29 Javascript
vue双向绑定的简单实现
2016/12/22 Javascript
js实现文字向上轮播功能
2017/01/13 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
2017/03/04 Javascript
input type=file 选择图片并且实现预览效果的实例
2017/10/26 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
2018/02/11 Javascript
JavaScript实现封闭区域布尔运算的示例代码
2018/06/25 Javascript
javascript自定义右键菜单插件
2019/12/16 Javascript
[57:37]EG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[01:10:03]OG vs EG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
python中使用urllib2伪造HTTP报头的2个方法
2014/07/07 Python
TensorFlow数据输入的方法示例
2018/06/19 Python
Python线程障碍对象Barrier原理详解
2019/12/02 Python
Visual Studio code 配置Python开发环境
2020/09/11 Python
CSS3使用多列制作瀑布流
2016/05/10 HTML / CSS
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
酒吧总经理岗位职责
2013/12/10 职场文书
《赵州桥》教学反思
2014/02/17 职场文书
幼儿园中班教师寄语
2014/04/03 职场文书
募捐倡议书
2014/04/14 职场文书
婚礼新人答谢词
2015/01/04 职场文书
工作失误检讨书
2015/01/26 职场文书
经理岗位职责
2015/02/02 职场文书
资料员岗位职责范本
2015/04/13 职场文书
2015年社区重阳节活动总结
2015/07/30 职场文书
2016党校学习心得体会范文
2016/01/07 职场文书
2016国庆促销广告语
2016/01/28 职场文书
暑假开始了,你的暑假学习计划写好了吗?
2019/07/04 职场文书
粗暴解决CUDA out of memory的问题
2021/05/22 Python