微信小程序 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 相关文章推荐
初识javascript 文档碎片
Jul 13 Javascript
js倒计时小程序
Nov 05 Javascript
jQuery ajax调用WCF服务实例
Jul 16 Javascript
浅谈JavaScript for循环 闭包
Jun 22 Javascript
JavaScript 中Date对象的格式化代码方法汇总
Sep 06 Javascript
用图片替换checkbox原始样式并实现同样的功能
Nov 15 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
Jun 10 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
Jun 14 Javascript
webpack中的模式(mode)使用详解
Feb 20 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
Jul 17 Javascript
typescript配置alias的详细步骤
Aug 12 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
php Smarty模板生成html文档的方法
2010/04/12 PHP
PHP多线程抓取网页实现代码
2010/07/22 PHP
php学习笔记 面向对象的构造与析构方法
2011/06/13 PHP
php遍历数组的方法分享
2012/03/22 PHP
php数据库配置文件一般做法分享
2012/07/07 PHP
很让人受教的 提高php代码质量36计
2012/09/05 PHP
CI框架验证码CAPTCHA辅助函数用法实例
2014/11/05 PHP
WordPress中给媒体文件添加分类和标签的PHP功能实现
2015/12/31 PHP
利用JavaScript实现新闻滚动效果(实例代码)
2013/11/27 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
2015/09/15 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
2016/05/10 Javascript
element-ui中的select下拉列表设置默认值方法
2018/08/24 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
2019/10/28 Javascript
js 对象使用的小技巧实例分析
2019/11/08 Javascript
Vue中添加滚动事件设置的方法详解
2020/09/14 Javascript
[02:36]DOTA2上海特锦赛 回忆电竞生涯的重要瞬间
2016/03/25 DOTA
[45:52]2018DOTA2亚洲邀请赛 4.1小组赛 A组加赛 LGD vs Liquid
2018/04/02 DOTA
用python处理MS Word的实例讲解
2018/05/08 Python
对Pyhon实现静态变量全局变量的方法详解
2019/01/11 Python
python被修饰的函数消失问题解决(基于wraps函数)
2019/11/04 Python
解决jupyter运行pyqt代码内核重启的问题
2020/04/16 Python
python中判断数字是否为质数的实例讲解
2020/12/06 Python
Pycharm 解决自动格式化冲突的设置操作
2021/01/15 Python
Python实现区域填充的示例代码
2021/02/03 Python
美国领先的商务贺卡出版商:The Gallery Collection
2018/02/13 全球购物
英国鲜花递送:Blossoming Gifts
2020/07/10 全球购物
英文简历中的自我评价
2013/10/06 职场文书
自荐信怎么写好
2013/11/11 职场文书
英文简历中的自我评价用语
2013/12/09 职场文书
晨会主持词
2014/03/17 职场文书
地球一小时倡议书
2014/04/15 职场文书
2014年财务个人工作总结
2014/12/08 职场文书
大学教师个人总结
2015/02/10 职场文书
信用卡催款律师函
2015/05/27 职场文书
酒店开业主持词
2015/07/02 职场文书
如何用Python搭建gRPC服务
2021/06/30 Python