微信小程序 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 相关文章推荐
javascrip客户端验证文件大小及文件类型并重置上传
Jan 12 Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Sep 13 Javascript
web网页按比例显示图片实现原理及js代码
Aug 09 Javascript
JavaScript中window、doucment、body的解释
Aug 14 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
Mar 13 Javascript
JavaScript DOM事件(笔记)
Apr 08 Javascript
12种JavaScript常用的MVC框架比较分析
Nov 16 Javascript
使用jQuery UI库开发Web界面的简单入门指引
Apr 22 Javascript
基于jQuery实现左侧菜单栏可折叠功能
Dec 27 Javascript
老生常谈js数据类型
Aug 03 Javascript
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
Node.js利用Express实现用户注册登陆功能(推荐)
Oct 26 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
全国FM电台频率大全 - 5 内蒙古自治区
2020/03/11 无线电
PHP isset()与empty()的使用区别详解
2010/08/29 PHP
php 无限级分类,超级简单的无限级分类,支持输出树状图
2014/06/29 PHP
PHP中使用addslashes函数转义的安全性原理分析
2014/11/03 PHP
PHP折半(二分)查找算法实例分析
2018/05/12 PHP
Laravel 集成 Geetest验证码的方法
2018/05/14 PHP
PHP后台备份MySQL数据库的源码实例
2019/03/18 PHP
javascript eval(func())使用示例
2013/12/05 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
2016/11/01 Javascript
整理关于Bootstrap列表组的慕课笔记
2017/03/29 Javascript
vue快捷键与基础指令详解
2017/06/01 Javascript
JavaScript简单实现合并两个Json对象的方法示例
2017/10/16 Javascript
基于vue-ssr服务端渲染入门详解
2018/01/08 Javascript
vue router 跳转后回到顶部的实例
2018/08/31 Javascript
详解关于html,css,js三者的加载顺序问题
2019/04/10 Javascript
vue.js路由mode配置之去掉url上默认的#方法
2019/11/01 Javascript
详解vue3.0 diff算法的使用(超详细)
2020/07/01 Javascript
[02:15]你好,这就是DOTA!
2015/08/05 DOTA
python模拟鼠标拖动操作的方法
2015/03/11 Python
一篇文章读懂Python赋值与拷贝
2018/04/19 Python
python检测主机的连通性并记录到文件的实例
2018/06/21 Python
django 信号调度机制详解
2019/07/19 Python
python使用百度文字识别功能方法详解
2019/07/23 Python
在Anaconda3下使用清华镜像源安装TensorFlow(CPU版)
2020/04/19 Python
python 使用tkinter+you-get实现视频下载器
2020/11/17 Python
德国婴儿推车和儿童安全座椅商店:BABYSHOP
2016/09/01 全球购物
美国男装连锁零售商:Men’s Wearhouse
2016/10/14 全球购物
世界上最大的隐形眼镜商店:1-800 Contacts
2018/11/03 全球购物
怎么可以提高数据库查询数据的速度
2014/06/28 面试题
《列夫托尔斯泰》教学反思
2014/02/10 职场文书
2014年社区学雷锋活动总结
2014/03/09 职场文书
项目委托协议书(最新)
2014/09/13 职场文书
创业计划书之寿司
2019/07/19 职场文书
Java 在生活中的 10 大应用
2021/11/02 Java/Android
HTML中的表单元素介绍
2022/02/28 HTML / CSS
JavaWeb Servlet开发注册页面实例
2022/04/11 Java/Android