微信小程序 location API接口详解及实例代码


Posted in Javascript onOctober 12, 2016

 微信小程序 location API 接口:

现在微信小程序火了 ,利用假期时间学习了下,微信小程序的基础知识,嘿嘿!

以下是记录学习微信小程序 location API接口,并且写了一个小实例来记录,如有错误之处还请指正。

微信小程序的位置接口共有两个:

1、wx.getLocation(OBJECT)获取当前的地理位置、速度。
2、wx.openLocation(OBJECT) 使用微信内置地图查看位置

然后,根据object参数说明,结合module模块化重写了下两个接口在暴露出来引用,让项目更加灵活管理。具体代码如下:

location.js::

/** 
 * 获取当前的地理位置、速度。 
 * 1、fType:     默认为 wgs84 返回 gps 坐标,gcj02 返回可用于wx.openLocation的坐标   选填 
 * 2、cbSuccessFun: 接口调用成功的回调函数,返回内容详见返回参数说明。 必填 
 * 3、cbFailFun:  接口调用失败的回调函数 选填 
 * 4、cbCompleteFun:接口调用结束的回调函数(调用成功、失败都会执行) 选填 
 */ 
function getLocationFun(fType, cbSuccessFun, cbFailFun, cbCompleteFun){ 
  var getObj={}; 
  getObj.type="wgs84"; 
  if(fType){ 
    getObj.type=fType; 
  } 
  getObj.success=function(res){ 
    var _res=res; 
    if(cbSuccessFun){ 
      cbSuccessFun(_res); 
    } 
  } 
  getObj.fail=function(res){ 
    if(cbFailFun){ 
      cbFailFun(); 
    }else{ 
      console.log("getLocation fail:"+res.errMsg); 
    } 
  } 
  getObj.complete=function(res){ 
    if(cbCompleteFun){ 
      cbCompleteFun(); 
    } 
  } 
  wx.getLocation(getObj); 
} 
 
/** 
 * 使用微信内置地图查看位置 
 * 1、latitude:   纬度,范围为-90~90,负数表示南纬 必填 
 * 2、longitude:  经度,范围为-180~180,负数表示西经 必填 
 * 3、scale:    缩放比例,范围1~28,默认为28 选填 
 * 4、name:     位置名 选填 
 * 5、address:   地址的详细说明 选填 
 * 6、cbSuccessFun: 接口调用成功的回调函数 选填 
 * 7、cbFailFun:  接口调用失败的回调函数 选填 
 * 8、cbCompleteFun:接口调用结束的回调函数(调用成功、失败都会执行) 选填 
 */ 
function openLocationFun(latitude, longitude, scale, name, address, cbSuccessFun, cbFailFun, cbCompleteFun){ 
  var openObj={}; 
  openObj.latitude=latitude; 
  openObj.longitude=longitude; 
  openObj.scale=15; 
  if(scale>0 && scale<29){ 
    openObj.scale=scale; 
  } 
  if(name){ 
    openObj.name=name; 
  } 
  if(address){ 
    openObj.address=address; 
  } 
  openObj.success=function(res){ 
    if(cbSuccessFun){ 
      cbSuccessFun(); 
    } 
  } 
  openObj.fail=function(res){ 
    if(cbFailFun){ 
      cbFailFun(); 
    }else{ 
      console.log("openLocation fail:"+res.errMsg); 
    } 
  } 
  openObj.complete=function(res){ 
    if(cbCompleteFun){ 
      cbCompleteFun(); 
    } 
  } 
  wx.openLocation(openObj); 
} 
 
module.exports={ 
  getLocationFun: getLocationFun, 
  openLocationFun: openLocationFun 
}

demo.js::

var comm = require( "../../common/common.js" ); 
var location=require('../../common/location.js'); 
Page( { 
 data: { 
  uploadImgUrls: [], 
  title: "" 
 }, 
 getlocation: function( e ) { 
  location.getLocationFun( 
   'gcj02',  
   function(cb){ 
    console.log(cb); 
    var _latitude=cb.latitude; 
    var _longitude=cb.longitude; 
    location.openLocationFun( 
     _latitude, 
     _longitude, 
     null, 
     "厦门观音山", 
     "厦门观音山匹克大厦", 
     null, 
     null, 
     null 
    ) 
   } 
  ) 
 }, 
 onLoad: function( options ) { 
  var _title = "ddd"; 
  if( options.title ) { 
   _title = options.title; 
  } 
  this.setData( { 
   title: _title 
  }) 
  console.log("load") 
  console.log( comm.formatDateFun( new Date(), 1 ) ); 
 }, 
 onShow:function(e){ 
  console.log("show"); 
 }, 
 onHide: function(e){ 
  console.log("hide"); 
 }, 
 onUnload:function(e){ 
  console.log("unload"); 
 } 
 // onReady: function(){ 
 //  wx.setNavigationBarTitle({ 
 //   title: this.data.title 
 //  }); 
 // } 
})

经调试发现getLocation接口的type不管是传递wgs84还是gcj02返回的参数都是只有经纬度,并没有文档上提到的速度和位置的精确度两个参数

微信小程序 location API接口详解及实例代码

然后我在点击“去这里”页面跳转后,发现每次都是提示定位失败,不晓得是不是因为web开发工具的原因。而且好像经纬度有差距,和本人实际距离不一致。还有定义了name和address两个参数并没有发现有啥变化,最后比较严重的问题是我点击返回后提示page route错误,再次点击按钮,提示错误了,不能点击。不知道什么原因?要怎么解决!

微信小程序 location API接口详解及实例代码

目前针对这个接口学习到这里,后续有其他发现或者解决办法在来更新。

==============================================================================================

今天,微信发布新版本了【最新版本 0.10.101100】,对于位置接口也有进一步的更新,

1、打开地图接口在返回不会提示page route错误了

2、wx.openLocation接口传递自定义的name和address参数后,可以在地图描述框,显示出来了,不过经纬度依然不够准确。点击“去这里”依然是定位失败。 

微信小程序 location API接口详解及实例代码

感谢阅读,希望能帮助到大家,谢谢对本站的支持!

Javascript 相关文章推荐
百度 popup.js 完美修正版非常的不错 脚本之家推荐
Apr 17 Javascript
JavaScript 学习笔记(十六) js事件
Feb 01 Javascript
使用Node.js为其他程序编写扩展的基本方法
Jun 23 Javascript
基于JavaScript实现跳转提示页面
Sep 24 Javascript
给easyui的datebox控件添加清空按钮的实现方法
Nov 09 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
Dec 08 Javascript
jQuery 常见小例汇总
Dec 14 Javascript
使用BootStrap进行轮播图的制作
Jan 06 Javascript
Vue中组件之间数据的传递的示例代码
Sep 08 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
Aug 03 Javascript
JS实现的自定义map方法示例
May 17 Javascript
对layui中的onevent 和event的使用详解
Sep 06 Javascript
webpack+vue.js实现组件化详解
Oct 12 #Javascript
微信小程序 加载 app-service.js 错误解决方法
Oct 12 #Javascript
微信js-sdk上传与下载图片接口用法示例
Oct 12 #Javascript
JS禁止查看网页源代码的实现方法
Oct 12 #Javascript
webpack+vue.js快速入门教程
Oct 12 #Javascript
jquery 抽奖小程序实现代码
Oct 12 #Javascript
微信js-sdk地理位置接口用法示例
Oct 12 #Javascript
You might like
WINDOWS服务器安装多套PHP的另类解决方案
2006/10/09 PHP
使用 MySQL Date/Time 类型
2008/03/26 PHP
一个简单至极的PHP缓存类代码
2015/10/23 PHP
PHP使用mysqli操作MySQL数据库的简单方法
2017/02/04 PHP
PHP实现的curl批量请求操作示例
2018/06/06 PHP
通过js脚本复制网页上的一个表格的不错实现方法
2006/12/29 Javascript
表单(FORM)的一些实用效果代码
2007/03/25 Javascript
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
2010/03/17 Javascript
ajax java 实现自动完成功能
2012/12/19 Javascript
Jquery Ajax方法传值到action的方法
2014/05/11 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
2015/04/21 Javascript
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
2016/08/05 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
2016/09/23 Javascript
jquery代码规范让代码越来越好看
2017/02/03 Javascript
微信小程序滑动选择器的实现代码
2018/08/10 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
2018/10/18 Javascript
python虚拟环境 virtualenv的简单使用
2020/01/21 Javascript
微信小程序实现简单文字跑马灯
2020/05/26 Javascript
javascript实现数字时钟效果
2021/02/06 Javascript
用python实现面向对像的ASP程序实例
2014/11/10 Python
Python调用adb命令实现对多台设备同时进行reboot的方法
2018/10/15 Python
Python异常处理知识点总结
2019/02/18 Python
Python 日期区间处理 (本周本月上周上月...)
2019/08/08 Python
css3实现动画的三种方式
2020/08/24 HTML / CSS
家得宝加拿大家装网上商店:The Home Depot加拿大
2016/08/27 全球购物
Kathmandu英国网站:新西兰户外运动品牌
2017/03/27 全球购物
Hobbs官方网站:英国奢华女性时尚服装
2020/02/22 全球购物
高级方案规划工程师岗位职责
2013/11/29 职场文书
应用英语专业自荐信
2014/01/26 职场文书
升国旗仪式主持词
2014/03/19 职场文书
文明好少年事迹材料
2014/08/19 职场文书
辛亥革命观后感
2015/06/02 职场文书
2015年四年级班主任工作总结
2015/10/22 职场文书
学校2016年圣诞节活动总结
2016/03/31 职场文书
Flask使用SQLAlchemy实现持久化数据
2021/07/16 Python