微信小程序 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 相关文章推荐
JavaScript去掉数组中的重复元素
Jan 13 Javascript
javascript轻量级模板引擎juicer使用指南
Jun 22 Javascript
使用命令对象代替switch语句的写法示例
Feb 28 Javascript
js验证真实姓名与身份证号是否匹配
Oct 13 Javascript
解析JavaScript中的字符串类型与字符编码支持
Jun 24 Javascript
jquery之别踩白块游戏的简单实现
Jul 25 Javascript
Bootstrap Table使用心得总结
Nov 29 Javascript
vuejs如何配置less
Apr 25 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
Dec 12 Javascript
Vue使用localStorage存储数据的方法
May 27 Javascript
layui实现下拉框三级联动
Jul 26 Javascript
原生js实现表格翻页和跳转
Sep 29 Javascript
微信小程序 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
Yii核心组件AssetManager原理分析
2014/12/02 PHP
ThinkPHP5.0框架实现切换数据库的方法分析
2019/10/30 PHP
Add a Formatted Table to a Word Document
2007/06/15 Javascript
jQuery ctrl+Enter shift+Enter实现代码
2010/02/07 Javascript
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
2010/06/18 Javascript
高效的表格行背景隔行变色及选定高亮的JS代码
2010/12/04 Javascript
js优化针对IE6.0起作用(详细整理)
2012/12/25 Javascript
jQuery布局插件UI Layout简介及使用方法
2013/04/03 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
2013/11/05 Javascript
7个JS基础知识总结
2014/03/05 Javascript
jquery制作多功能轮播图插件
2015/04/02 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
2015/11/06 Javascript
JS简单实现禁止访问某个页面的方法
2016/09/13 Javascript
jQuery validate插件功能与用法详解
2016/12/15 Javascript
深入理解Javascript中的valueOf与toString
2017/01/04 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
2017/04/27 Javascript
nodejs中sleep功能实现暂停几秒的方法
2017/07/12 NodeJs
vue监听scroll的坑的解决方法
2017/09/07 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
2018/09/03 Javascript
JavaScript之解构赋值的理解
2019/01/30 Javascript
Openlayers实现扩散的动态点(水纹效果)
2020/08/17 Javascript
[05:09]2016国际邀请赛中国区预选赛淘汰赛首日精彩回顾
2016/06/29 DOTA
[44:40]Serenity vs Pain 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
在Python的Django框架的视图中使用Session的方法
2015/07/23 Python
Python和C/C++交互的几种方法总结
2017/05/11 Python
详解python之配置日志的几种方式
2017/05/22 Python
Python多线程爬虫实战_爬取糗事百科段子的实例
2017/12/15 Python
pandas修改DataFrame列名的方法
2018/04/08 Python
Python基于pip实现离线打包过程详解
2020/05/15 Python
python 写一个性能测试工具(一)
2020/10/24 Python
CSS3田字格列表的样式编写方法
2018/11/22 HTML / CSS
公司年会抽奖活动主持词
2014/03/31 职场文书
保险公司演讲稿
2014/09/02 职场文书
群众路线教育实践活动学习心得体会
2014/10/30 职场文书
2015年领班工作总结
2015/04/29 职场文书
2019财务毕业实习报告
2019/06/27 职场文书