微信小程序 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表单验证代码
Aug 02 Javascript
HTML Dom与Css控制方法
Oct 25 Javascript
JavaScript常用全局属性与方法记录积累
Jul 03 Javascript
浅谈jQuery中的事件
Mar 23 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
Jun 12 Javascript
jQuery实现简单的网页换肤效果示例
Sep 18 Javascript
浅析前端路由简介以及vue-router实现原理
Jun 01 Javascript
微信小程序倒计时功能实例代码
Jul 17 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
Jul 26 Javascript
vue.js实现只能输入数字的输入框
Oct 19 Javascript
vue双向绑定数据限制长度的方法
Nov 04 Javascript
JS实现简单控制视频播放倍速的实例代码
Apr 18 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
php 阴历-农历-转换类代码
2012/01/16 PHP
深入浅析用PHP实现MVC
2016/03/02 PHP
Laravel用户授权系统的使用方法示例
2018/09/16 PHP
In Javascript Class, how to call the prototype method.(three method)
2007/01/09 Javascript
JS 获取浏览器和屏幕宽高等信息代码
2014/03/31 Javascript
JavaScript判断浏览器类型的方法
2015/02/10 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
2016/06/26 Javascript
JS中对Cookie的操作详解
2016/08/05 Javascript
JavaScript 计算笛卡尔积实例详解
2016/12/02 Javascript
canvas时钟效果
2017/02/16 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
2017/06/19 Javascript
微信小程序录音与播放录音功能
2017/12/25 Javascript
vue给组件传递不同的值方法
2018/09/29 Javascript
React中使用外部样式的3种方式(小结)
2019/05/28 Javascript
[55:35]VGJ.S vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
[45:50]完美世界DOTA2联赛PWL S3 CPG vs Forest 第二场 12.16
2020/12/17 DOTA
Python3使用requests发闪存的方法
2016/05/11 Python
python在html中插入简单的代码并加上时间戳的方法
2018/10/16 Python
pycharm 将python文件打包为exe格式的方法
2019/01/16 Python
python 使用matplotlib 实现从文件中读取x,y坐标的可视化方法
2019/07/04 Python
将tensorflow.Variable中的某些元素取出组成一个新的矩阵示例
2020/01/04 Python
pytorch实现用CNN和LSTM对文本进行分类方式
2020/01/08 Python
新年福利来一波之Python轻松集齐五福(demo)
2020/01/20 Python
Python实现电视里的5毛特效实例代码详解
2020/05/15 Python
解决Keras中循环使用K.ctc_decode内存不释放的问题
2020/06/29 Python
Python requests上传文件实现步骤
2020/09/15 Python
new修饰符是起什么作用
2015/06/28 面试题
《鱼游到了纸上》教学反思
2014/02/20 职场文书
新年联欢会主持词
2014/03/27 职场文书
入党积极分子学习党的纲领思想汇报
2014/09/13 职场文书
责任书格式
2019/04/18 职场文书
写一个Python脚本自动爬取Bilibili小视频
2021/04/24 Python
MongoDB orm框架的注意事项及简单使用
2021/06/20 MongoDB
Android Studio实现简易进制转换计算器
2022/05/20 Java/Android
MYSQL事务的隔离级别与MVCC
2022/05/25 MySQL
SQL Server数据库备份和恢复数据库的全过程
2022/06/14 SQL Server