微信小程序 location API实例详解


Posted in Javascript onOctober 02, 2016

微信小程序 location API实例详解

location API也就分这里分两种wx.getLocation(object)获取当前位置和wx.openLocation(object)通过经纬度打开内置地图。其中定位获取位置信息返回参数是有问题的speed,accuracy这两个是没有的。还有一个就是打开内置地图之后再返回会报一个错误(Page route错误—WAService.js:2 navigateBack 一个不存在的webviewId0)如果有知道的可告知,我找到解决方式也会补充下!

主要属性:

wx.getLocation(object)获取当前位置

微信小程序 location API实例详解

成功之后返回参数

微信小程序 location API实例详解

wx.openLocation(object)打开微信内置地图

微信小程序 location API实例详解

这里直接进入微信内置应用,当使用导航返回键时是内部写的外界无法干预所以WAService.js:2 navigateBack 一个不存在的webviewId0这个错估计也带等小程序修复吧!!

wxml

<button id="0" type="primary" bindtap="listenerBtnGetLocation">定位当前位置并打开内置地图</button>

js

Page({
 data:{
  text:"Page location"
 },
 onLoad:function(options){
  // 页面初始化 options为页面跳转所带来的参数
 },

 /**
  * 监听定位到当前位置
  */
 listenerBtnGetLocation: function() {
  wx.getLocation({
   //定位类型 wgs84, gcj02
   type: 'gcj02',
   success: function(res) {
    console.log(res)
    wx.openLocation({
     //当前经纬度
     latitude: res.latutude,
     longitude: res.longitude,
     //缩放级别默认28
     scale: 28,
     //位置名
     name: '测试地址',
     //详细地址
     address: '火星路24号',
     //成功打印信息
     success: function(res) {
      console.log(res)
     },
     //失败打印信息
     fail: function(err) {
      console.log(err)
     },
     //完成打印信息
     complete: function(info){
      console.log(info)
     },
    })

   },
   fail: function(err) {
    console.log(err)
   },
   complete: function(info) {
    console.log(info)
   },
  })
 },

 onReady:function(){
  // 页面渲染完成
 },
 onShow:function(){
  // 页面显示
 },
 onHide:function(){
  // 页面隐藏
 },
 onUnload:function(){
  // 页面关闭
 }
})

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

Javascript 相关文章推荐
非常好的js代码
Jun 27 Javascript
js option删除代码集合
Nov 12 Javascript
jQuery filter函数使用方法
May 19 Javascript
使用百度地图api实现根据地址查询经纬度
Dec 11 Javascript
js实现表格筛选功能
Jan 18 Javascript
浅谈JS验证表单文本域输入空格的问题
Feb 14 Javascript
JavaScript动态创建二维数组的方法示例
Feb 01 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
Apr 17 Javascript
ES6模板字符串和标签模板的应用实例分析
Jun 25 Javascript
Vue.js下拉菜单组件使用方法详解
Oct 19 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
Feb 11 Javascript
jQuery treeview树形结构应用
Mar 24 jQuery
微信小程序 Storage API实例详解
Oct 02 #Javascript
微信小程序 Video API实例详解
Oct 02 #Javascript
老生常谈JavaScript中的this关键字
Oct 01 #Javascript
ES6新特征数字、数组、字符串
Oct 01 #Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
Oct 01 #Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
Oct 01 #Javascript
javascript代码调试之console.log 用法图文详解
Sep 30 #Javascript
You might like
解析dedecms空间迁移步骤详解
2013/05/15 PHP
memcache命令启动参数中文解释
2014/01/13 PHP
PHP实现WebService的简单示例和实现步骤
2015/03/27 PHP
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
PHPExcel在linux环境下导出报500错误的解决方法
2017/01/26 PHP
让iframe框架网页在任何浏览器下自动伸缩
2006/08/18 Javascript
基于node.js的快速开发透明代理
2010/12/25 Javascript
jQuery实现的简单分页示例
2016/06/01 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
Bootstrap table使用方法总结
2017/05/10 Javascript
label+input实现按钮开关切换效果的实例
2017/08/16 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
2018/03/09 Javascript
Vue+Django项目部署详解
2019/05/30 Javascript
构建大型 Vue.js 项目的10条建议(小结)
2019/11/14 Javascript
Python的Django框架可适配的各种数据库介绍
2015/07/15 Python
python使用正则表达式匹配字符串开头并打印示例
2017/01/11 Python
VSCode Python开发环境配置的详细步骤
2019/02/22 Python
安装2019Pycharm最新版本的教程详解
2019/10/22 Python
python 命名规范知识点汇总
2020/02/14 Python
python利用proxybroker构建爬虫免费IP代理池的实现
2021/02/21 Python
html5通过postMessage进行跨域通信的方法
2017/12/04 HTML / CSS
英国手机零售商:Metrofone
2019/03/18 全球购物
对象的序列化(serialization)类是面向流的,应如何将对象写入到随机存取文件中
2015/06/22 面试题
土木工程建筑专业毕业生求职信
2013/10/21 职场文书
党员自我评价分享
2013/12/13 职场文书
生产部经理岗位职责
2013/12/16 职场文书
销售工作岗位职责
2013/12/24 职场文书
家长给老师的道歉信
2014/01/13 职场文书
理工大学毕业生自荐信范文
2014/02/22 职场文书
院领导写的就业推荐信
2014/03/09 职场文书
文案策划求职信
2014/04/14 职场文书
工作建议书范文
2014/05/13 职场文书
2014年大堂经理工作总结
2014/11/21 职场文书
PHP中->和=>的意思
2021/03/31 PHP
MySQL sql_mode的使用详解
2021/05/08 MySQL
Spring Boot 启动、停止、重启、状态脚本
2021/06/26 Java/Android