微信小程序3种位置API的使用方法详解


Posted in Javascript onAugust 05, 2019

获取位置

获取当前的地理位置、速度。当用户离开小程序后,此接口无法调用;当用户点击“显示在聊天顶部”时,此接口可继续调用。

微信小程序3种位置API的使用方法详解

微信小程序3种位置API的使用方法详解

wx.getLocation(object)

微信小程序3种位置API的使用方法详解

微信小程序3种位置API的使用方法详解

<view class="container">
 <button bindtap='getLocation'>获取位置</button>
 <view wx:if="{{latitude !=''}}">
  <view>纬度:{{latitude}}</view>
  <view>经度:{{longitude}}</view>
  <view>速度:{{speed}}</view>
  <view>位置的精确度:{{accuracy}}</view>
  <view>高度:{{altitude}}</view>
  <view>垂直精度:{{accuracy}}</view>
  <view>水平精度:{{accuracy}}</view>
 </view>
</view>
//index.js
//获取应用实例
const app = getApp()
Page({
 data: {
  latitude: '',
  longitude: '',
  speed: '',
  accuracy: '',
  altitude:'',
  verticalAccuracy: '',
  horizontalAccuracy:''
 },
 onLoad: function () {
 },
 getLocation:function(){
  var _this=this;
  wx.getLocation({
   type: 'wgs84',
   success: function (res) {
    var latitude = res.latitude
    var longitude = res.longitude
    var speed = res.speed
    var accuracy = res.accuracy
    var altitude = res.altitude
    var verticalAccuracy = res.verticalAccuracy
    var horizontalAccuracy = res.horizontalAccuracy
    _this.setData({
     latitude: latitude,
     longitude: longitude,
     speed: speed,
     accuracy: accuracy,
     altitude: altitude,
     verticalAccuracy: verticalAccuracy,
     horizontalAccuracy: horizontalAccuracy
    })
   }
  })
 }
})

打开地图选择位置

wx.chooseLocation(OBJECT)

打开地图选择位置。

需要用户授权 scope.userLocation

微信小程序3种位置API的使用方法详解

微信小程序3种位置API的使用方法详解

微信小程序3种位置API的使用方法详解

微信小程序3种位置API的使用方法详解

wx.chooseLocation(object)

微信小程序3种位置API的使用方法详解

微信小程序3种位置API的使用方法详解

<view class="container">
 <button bindtap='getLocation'>打开地图选择位置</button>
 <view wx:if="{{address !=''}}">
  <view>位置名称:{{name}}</view>
  <view>详细地址:{{address}}</view>
  <view>纬度:{{latitude}}</view>
  <view>经度:{{longitude}}</view>
 </view>
</view>
//index.js
//获取应用实例
const app = getApp()
Page({
 data: {
  name: '',
  address: '',
  latitude: '',
  longitude: ''
 },
 onLoad: function () {
 },
 getLocation:function(){
  var _this=this;
  wx.chooseLocation({
   success: function (res) {
    var name = res.name
    var address = res.address
    var latitude = res.latitude
    var longitude = res.longitude
    _this.setData({
     name: name,
     address: address,
     latitude: latitude,
     longitude: longitude
    })
   }
  })
 }
})

​使用微信内置地图查看位置

使用微信内置地图查看位置。

微信小程序3种位置API的使用方法详解

微信小程序3种位置API的使用方法详解

wx.openLocation(OBJECT)

微信小程序3种位置API的使用方法详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 选择器部分整理
Oct 28 Javascript
js初始化验证实例详解
Nov 26 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
May 31 Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
Jun 22 Javascript
简单实现jQuery手风琴效果
Aug 18 jQuery
vue.js异步上传文件前后端实现代码
Aug 22 Javascript
vue 使用ref 让父组件调用子组件的方法
Feb 08 Javascript
vue webpack开发访问后台接口全局配置的方法
Sep 18 Javascript
JavaScript中filter的用法实例分析
Feb 27 Javascript
详解js location.href和window.open的几种用法和区别
Dec 02 Javascript
Vue使用axios引起的后台session不同操作
Aug 14 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
Aug 27 Javascript
微信小程序 高德地图路线规划实现过程详解
Aug 05 #Javascript
详解将微信小程序接口Promise化并使用async函数
Aug 05 #Javascript
使用apifm-wxapi模块中的问题及解决方法
Aug 05 #Javascript
使用apifm-wxapi快速开发小程序过程详解
Aug 05 #Javascript
浅谈Vue项目骨架屏注入实践
Aug 05 #Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
Aug 05 #Javascript
JS 自执行函数原理及用法
Aug 05 #Javascript
You might like
3
2006/10/09 PHP
thinkphp控制器调度使用示例
2014/02/24 PHP
php实现修改新闻时删除图片的方法
2015/05/12 PHP
Zend Framework实现Zend_View集成Smarty模板系统的方法
2016/03/05 PHP
完美解决在ThinkPHP控制器中命名空间的问题
2017/05/05 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
javascript 读取XML数据,在页面中展现、编辑、保存的实现
2009/10/27 Javascript
jQuery中each()方法用法实例
2014/12/27 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
2016/04/04 Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
2016/05/07 Javascript
Backbone View 之间通信的三种方式
2016/08/09 Javascript
Vuepress 搭建带评论功能的静态博客的实现
2019/02/17 Javascript
在Web关闭页面时发送Ajax请求的实现方法
2019/03/07 Javascript
jQuery中DOM常见操作实例小结
2019/08/01 jQuery
基于jquery实现彩色投票进度条代码解析
2020/08/26 jQuery
Python魔术方法详解
2015/02/14 Python
python中日志logging模块的性能及多进程详解
2017/07/18 Python
用python简单实现mysql数据同步到ElasticSearch的教程
2018/05/30 Python
Python操作redis实例小结【String、Hash、List、Set等】
2019/05/16 Python
python 函数中的参数类型
2020/02/11 Python
Python动态导入模块和反射机制详解
2020/02/18 Python
GOOD AMERICAN官网:为曲线性感而设计
2017/12/28 全球购物
美国领先的精品家居照明和装饰产品在线零售商:LightsOnline.com
2018/01/23 全球购物
珍珠鸟教学反思
2014/02/01 职场文书
意向协议书范本
2014/04/23 职场文书
优秀安全员事迹材料
2014/05/11 职场文书
医药公司采购员岗位职责
2014/09/12 职场文书
致百米运动员广播稿5篇
2014/10/13 职场文书
2015庆祝七一建党节94周年活动总结
2015/03/20 职场文书
工厂仓管员岗位职责
2015/04/01 职场文书
《观潮》教学反思
2016/02/17 职场文书
小学生优秀作文范文(六篇)
2019/07/10 职场文书
PHP判断是否是json字符串
2021/04/01 PHP
解决Pytorch中关于model.eval的问题
2021/05/22 Python
浅谈Redis的keys命令到底有多慢
2021/10/05 Redis
利用Python实时获取steam特惠游戏数据
2022/06/25 Python