微信小程序 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 相关文章推荐
avascript中的自执行匿名函数应用示例
Sep 15 Javascript
js简单实现点击左右运动的方法
Apr 10 Javascript
详解JavaScript ES6中的模板字符串
Jul 28 Javascript
JS实现网页标题随机显示名人名言的方法
Nov 03 Javascript
分享javascript实现的冒泡排序代码并优化
Jun 05 Javascript
简单实现jquery焦点图
Dec 12 Javascript
Vue.js 60分钟快速入门教程
Mar 28 Javascript
angular4模块中给标签添加背景图的实现方法
Sep 15 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
Oct 31 Javascript
手把手带你封装一个vue component第三方库
Feb 14 Javascript
Nuxt v-bind绑定img src不显示的解决
Dec 05 Javascript
基于vue+element实现全局loading过程详解
Jul 10 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第一季视频教程(李炎恢+php100 不断更新)
2011/05/29 PHP
php实现微信公众平台账号自定义菜单类
2015/10/11 PHP
php通过文件头判断格式的方法
2016/05/28 PHP
jquery tools 系列 scrollable(2)
2009/09/06 Javascript
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
2010/03/04 Javascript
jQuery实现的多选框多级联动插件
2014/05/02 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
2014/07/29 Javascript
图解js图片轮播效果
2015/12/20 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
2016/01/27 Javascript
深入理解js promise chain
2016/05/05 Javascript
JavaScript常用判断写法大全(推荐)
2016/05/30 Javascript
jQuery实现的事件绑定功能基本示例
2017/10/11 jQuery
BootStrap 标题设置跨行无效的解决方法
2017/10/25 Javascript
vue注册组件的几种方式总结
2018/03/08 Javascript
JavaScript设计模式之代理模式实例分析
2019/01/16 Javascript
JS中如何轻松遍历对象属性的方式总结
2019/08/06 Javascript
OpenLayers3实现对地图的基本操作
2020/09/28 Javascript
JS highcharts实现动态曲线代码示例
2020/10/16 Javascript
[05:31]干嘛呢兄弟!DOTA2 TI9语音轮盘部分出处
2019/05/14 DOTA
[01:12:40]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第三场 1月25日
2021/03/11 DOTA
利用Hyperic调用Python实现进程守护
2018/01/02 Python
pycharm 激活码及使用方式的详细教程
2020/05/12 Python
Python调用.net动态库实现过程解析
2020/06/05 Python
关于python的缩进规则的知识点详解
2020/06/22 Python
英国在线电子和小工具商店:TecoBuy
2018/10/06 全球购物
应届毕业生求职信范文分享
2013/12/26 职场文书
兼职业务员岗位职责
2014/01/01 职场文书
分公司负责人任命书
2014/06/04 职场文书
争先创优活动总结
2014/08/27 职场文书
试用期自我评价范文
2015/03/10 职场文书
2015年健康教育工作总结
2015/04/10 职场文书
企业百日安全活动总结
2015/05/07 职场文书
2015年出纳工作总结与计划
2015/05/18 职场文书
生日宴会家属答谢词
2015/09/29 职场文书
2016年学校招生广告语
2016/01/28 职场文书
用Python进行栅格数据的分区统计和批量提取
2021/05/27 Python