微信小程序 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 对象比较实现代码
Apr 27 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
Aug 11 Javascript
解析JavaScript的ES6版本中的解构赋值
Jul 28 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
Aug 29 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
Sep 23 Javascript
JS调用打印机功能简单示例
Nov 28 Javascript
js实现手机发送验证码功能
Mar 13 Javascript
详解微信小程序实现WebSocket心跳重连
Jul 31 Javascript
vue解决一个方法同时发送多个请求的问题
Sep 25 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
Apr 17 Javascript
使用p5.js临摹动态图形
Oct 23 Javascript
Vue中nprogress页面加载进度条的方法实现
Nov 13 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中的str_repeat函数在JavaScript中的实现
2013/09/16 PHP
php提示Warning:mysql_fetch_array() expects的解决方法
2014/12/16 PHP
php文件上传 你真的掌握了吗
2016/11/28 PHP
laravel 解决paginate查询多个字段报错的问题
2019/10/22 PHP
php实现简易计算器
2020/08/28 PHP
js跑步算法的实现代码
2013/12/04 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
2014/03/19 Javascript
$(document).ready(function() {})不执行初始化脚本
2014/06/19 Javascript
js实现感应鼠标图片透明度变化的方法
2015/02/20 Javascript
浅析AngularJS中的生命周期和延迟处理
2015/06/18 Javascript
浅谈JavaScript的全局变量与局部变量
2016/06/10 Javascript
修改ligerui 默认确认按钮的方法
2016/12/27 Javascript
js+html制作简单验证码
2017/02/16 Javascript
bootstrap实现动态进度条效果
2017/03/08 Javascript
JavaScript学习笔记之函数记忆
2017/09/06 Javascript
Vue官方文档梳理之全局配置
2017/11/22 Javascript
Vuex 进阶之模块化组织详解
2018/01/12 Javascript
详解vue-router传参的两种方式
2018/09/10 Javascript
ES6中Promise的使用方法实例总结
2020/02/18 Javascript
Python 调用VC++的动态链接库(DLL)
2008/09/06 Python
如何使用Flask-Migrate拓展数据库表结构
2019/07/24 Python
使用python远程操作linux过程解析
2019/12/04 Python
Python 读取有公式cell的结果内容实例方法
2020/02/17 Python
解析python 中/ 和 % 和 //(地板除)
2020/06/28 Python
阿里巴巴的Oracle DBA笔试题答案-SQL tuning类
2016/04/03 面试题
企业管理毕业生求职信
2014/03/11 职场文书
升职演讲稿范文
2014/05/23 职场文书
高中学生会竞选演讲稿
2014/08/25 职场文书
实习生矿工检讨书
2014/10/13 职场文书
归元寺导游词
2015/02/06 职场文书
技术员岗位职责范本
2015/04/11 职场文书
活动总结书怎么写
2015/05/11 职场文书
电影开国大典观后感
2015/06/04 职场文书
婚育证明格式
2015/06/17 职场文书
周一给客户的问候语
2015/11/10 职场文书
《总之就是很可爱》新作短篇动画《总之就是很可爱~制服~》将于2022年夏天播出
2022/04/07 日漫