微信小程序 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 利用Cookie记录用户登录信息
Dec 08 Javascript
js鼠标及对象坐标控制属性详细解析
Dec 14 Javascript
js清空表单数据的两种方式(遍历+reset)
Jul 18 Javascript
Javascript基础教程之JavaScript语法
Jan 18 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
Sep 06 Javascript
jquery ztree异步搜索(搜叶子)实践
Feb 25 Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
May 19 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
Jun 20 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
Dec 20 Javascript
微信小程序获取用户绑定手机号方法示例
Jul 21 Javascript
node.js中module模块的功能理解与用法实例分析
Feb 14 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
Sep 24 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
DC漫画《蝙蝠侠和猫女》图透 猫女怀孕老爷当爹
2020/04/09 欧美动漫
MOTOROLA 摩托罗拉 MODEL 66-XI五灯中波收音机
2021/03/02 无线电
php源码分析之DZX1.5随机数函数random用法
2015/06/17 PHP
PHP附件下载中文名称乱码的解决方法
2015/12/17 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
js下写一个事件队列操作函数
2010/07/19 Javascript
JS 获取select(多选下拉)中所选值的示例代码
2013/08/02 Javascript
javascript实用小函数使用介绍
2013/11/11 Javascript
jquery教程ajax请求json数据示例
2014/01/13 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
2015/02/17 Javascript
使用canvas实现仿新浪微博头像截取上传功能
2015/09/02 Javascript
jQuery实现的超简单点赞效果实例分析
2015/12/31 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
2017/05/10 Javascript
js实现移动端导航点击自动滑动效果
2017/07/18 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
2017/09/14 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
2017/12/27 Javascript
Vue项目中添加锁屏功能实现思路
2018/06/29 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
2018/07/18 Javascript
详解Vue demo实现商品列表的展示
2019/05/07 Javascript
Vue编程式跳转的实例代码详解
2019/07/10 Javascript
layer设置maxWidth及maxHeight解决方案
2019/07/26 Javascript
python操作oracle的完整教程分享
2018/01/30 Python
python批量读取文件名并写入txt文件中
2020/09/05 Python
python抓取多种类型的页面方法实例
2019/11/20 Python
python用opencv完成图像分割并进行目标物的提取
2020/05/25 Python
用C语言实现文件读写操作
2013/10/27 面试题
八年级语文教学反思
2014/02/11 职场文书
会计专业毕业生自荐书
2014/06/25 职场文书
客房领班岗位职责
2015/02/11 职场文书
公务员政审个人总结
2015/02/12 职场文书
会计继续教育培训心得体会
2016/01/19 职场文书
2019年世界儿童日宣传标语
2019/11/22 职场文书
Java tomcat手动配置servlet详解
2021/11/27 Java/Android
Vue的生命周期一起来看看
2022/02/24 Vue.js
python高温预警数据获取实例
2022/07/23 Python