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


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 相关文章推荐
Prototype1.6 JS 官方下载地址
Nov 30 Javascript
javascript中的parseInt和parseFloat区别
Jul 12 Javascript
24款热门实用的jQuery插件推荐
Dec 24 Javascript
基于JS实现简单的样式切换效果代码
Sep 04 Javascript
跟我学习javascript的全局变量
Nov 16 Javascript
javascript遍历json对象的key和任意js对象属性实例
Mar 09 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
Mar 30 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
Jan 12 Javascript
基于bootstrap页面渲染的问题解决方法
Aug 09 Javascript
js如何实现元素曝光上报
Aug 07 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
Apr 07 Javascript
js实现点击选项置顶动画效果
Aug 25 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
如何使用动态共享对象的模式来安装PHP
2006/10/09 PHP
php 中英文语言转换类代码
2011/08/11 PHP
PHP下判断网址是否有效的代码
2011/10/08 PHP
php根据分类合并数组的方法实例详解
2013/11/06 PHP
浅谈php自定义错误日志
2015/02/13 PHP
php实现的mongodb操作类实例
2015/04/03 PHP
解决用jquery load加载页面到div时,不执行页面js的问题
2014/02/22 Javascript
Jquery简单实现GridView行高亮的方法
2015/06/15 Javascript
超级给力的JavaScript的React框架入门教程
2015/07/02 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
2016/05/15 Javascript
react.js使用webpack搭配环境的入门教程
2017/08/14 Javascript
js移动端图片压缩上传功能
2020/08/18 Javascript
vue实现动态按钮功能
2019/05/13 Javascript
基于javascript实现贪吃蛇小游戏
2019/11/25 Javascript
5分钟快速看懂ES6中的反射与代理
2019/12/19 Javascript
JS实现瀑布流效果
2020/03/07 Javascript
vue+koa2搭建mock数据环境的详细教程
2020/05/18 Javascript
python求斐波那契数列示例分享
2014/02/14 Python
django 自定义用户user模型的三种方法
2014/11/18 Python
Python内建函数之raw_input()与input()代码解析
2017/10/26 Python
Django实现简单网页弹出警告代码
2019/11/15 Python
Python求解正态分布置信区间教程
2019/11/20 Python
Python3连接Mysql8.0遇到的问题及处理步骤
2020/02/17 Python
Python实现清理微信僵尸粉功能示例【基于itchat模块】
2020/05/29 Python
keras 模型参数,模型保存,中间结果输出操作
2020/07/06 Python
Python pysnmp使用方法及代码实例
2020/08/24 Python
Django如何实现密码错误报错提醒
2020/09/04 Python
香港个人化生活购物网站:Ballyhoo Limited
2016/09/10 全球购物
欧洲第一的摇滚和金属乐队服装网站:EMP
2017/10/26 全球购物
EJB的激活机制
2013/10/25 面试题
医务工作者先进事迹材料
2014/01/26 职场文书
致垒球运动员加油稿
2014/02/16 职场文书
2014年冬季防火方案
2014/05/21 职场文书
医院搬迁方案
2014/06/14 职场文书
MySQL 1130异常,无法远程登录解决方案详解
2021/08/23 MySQL
MySQL数据库必备之条件查询语句
2021/10/15 MySQL