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


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 相关文章推荐
表单提交验证类
Jul 14 Javascript
JQuery autocomplete 使用手册
Apr 01 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
Sep 09 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
Dec 16 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
Jan 02 Javascript
Jquery 在页面加载后执行的几种方式
Mar 14 Javascript
vue一步步实现alert功能
Jul 05 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
Jul 13 Javascript
React-Native中禁用Navigator手势返回的示例代码
Sep 09 Javascript
详解bootstrap导航栏.nav与.navbar区别
Nov 23 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
Sep 04 Javascript
element的el-table中记录滚动条位置的示例代码
Nov 06 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
Apache, PHP在Windows 9x/NT下的安装与配置 (二)
2006/10/09 PHP
数字转英文
2006/12/06 PHP
PHP爆绝对路径方法收集整理
2012/09/17 PHP
php读取目录及子目录下所有文件名的方法
2014/10/20 PHP
PHP实现合并discuz用户
2015/08/05 PHP
php生成txt文件实例代码介绍
2016/04/28 PHP
php文件系统处理方法小结
2016/05/23 PHP
php从身份证获取性别和出生年月
2017/02/09 PHP
PHP+MYSQL实现读写分离简单实战
2017/03/13 PHP
jQuery lazyload 的重复加载错误以及修复方法
2010/11/19 Javascript
图片onload事件触发问题解决方法
2011/07/31 Javascript
基于jQuery的公告无限循环滚动实现代码
2012/05/11 Javascript
时间戳转换为时间 年月日时间的JS函数
2013/08/19 Javascript
nodejs命令行参数处理模块commander使用实例
2014/09/17 NodeJs
JS实现的文字与图片定时切换效果代码
2015/10/06 Javascript
解决jQuery使用JSONP时产生的错误
2015/12/02 Javascript
javascript实现数字倒计时特效
2016/03/30 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
2016/08/01 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
2017/09/02 Javascript
Node.js创建HTTP文件服务器的使用示例
2018/05/11 Javascript
angularjs $http调用接口的方式详解
2018/08/13 Javascript
[49:58]完美世界DOTA2联赛PWL S3 Magma vs DLG 第一场 12.18
2020/12/19 DOTA
python实现多进程代码示例
2018/10/31 Python
Python3基本输入与输出操作实例分析
2020/02/14 Python
pycharm 实现复制一行的快捷键
2021/01/15 Python
美国网上花店:JustFlowers
2017/02/12 全球购物
英国最大的独立摄影零售商:Park Cameras
2019/11/27 全球购物
如何写出高性能的JSP和Servlet
2013/01/22 面试题
2014年大学生党课心得体会范文
2014/03/29 职场文书
物理课外活动总结
2014/08/27 职场文书
学校运动会广播稿
2014/10/11 职场文书
Redis数据结构之链表与字典的使用
2021/05/11 Redis
pandas 实现将NaN转换为None
2021/05/14 Python
java基础——多线程
2021/07/03 Java/Android
如何Python使用re模块实现okenizer
2022/04/30 Python
PostgreSQL怎么创建分区表详解
2022/06/25 PostgreSQL