微信小程序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 相关文章推荐
ExtJS Store的数据访问与更新问题
Apr 28 Javascript
jQuery.event兼容各浏览器的event详细解析
Dec 18 Javascript
本人自用的global.js库源码分享
Feb 28 Javascript
JavaScript生成SQL查询表单的方法
Aug 13 Javascript
JS实现可拖曳、可关闭的弹窗效果
Sep 26 Javascript
Angular2中select用法之设置默认值与事件详解
May 07 Javascript
浅谈AngularJS中$http服务的简单用法
May 15 Javascript
JS实现二维数组元素的排列组合运算简单示例
Jan 28 Javascript
JS数组方法concat()用法实例分析
Jan 18 Javascript
Vue中key的作用示例代码详解
Jun 10 Javascript
JavaScript对象访问器Getter及Setter原理解析
Dec 08 Javascript
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
微信小程序 高德地图路线规划实现过程详解
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
PHP实现采集抓取淘宝网单个商品信息
2015/01/08 PHP
php-redis中的sort排序函数总结
2015/07/08 PHP
编写PHP脚本使WordPress的主题支持Widget侧边栏
2015/12/14 PHP
PHP二维索引数组的遍历实例分析【2种方式】
2019/06/24 PHP
js 对象是否存在判断
2009/07/15 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
2013/12/03 Javascript
jquery ajax 局部无刷新更新数据的实现案例
2014/02/08 Javascript
jquery获取复选框checkbox的值的简单实现方法
2016/05/26 Javascript
基于JavaScript实现的折半查找算法示例
2017/04/14 Javascript
Vue学习笔记进阶篇之单元素过度
2017/07/19 Javascript
JS实现百度搜索接口及链接功能实例代码
2018/02/02 Javascript
Vue2.0 http请求以及loading展示实例
2018/03/06 Javascript
JS实现根据指定值删除数组中的元素操作示例
2018/08/02 Javascript
微信小程序登录数据解密及状态维持实例详解
2019/05/06 Javascript
JavaScript实现多文件下载方法解析
2020/08/07 Javascript
jQuery实现查看图片功能
2020/12/01 jQuery
Python2和Python3中print的用法示例总结
2017/10/25 Python
对Tensorflow中的变量初始化函数详解
2018/07/27 Python
Python为何不能用可变对象作为默认参数的值
2019/07/01 Python
python Pandas库基础分析之时间序列的处理详解
2019/07/13 Python
详解Python并发编程之从性能角度来初探并发编程
2019/08/23 Python
Python 抓取数据存储到Redis中的操作
2020/07/16 Python
Python实现小黑屋游戏的完整实例
2021/01/06 Python
犹他州最古老的体育用品公司:Al’s
2020/12/18 全球购物
广州地球村科技数据库题目
2016/04/25 面试题
高级护理专业大学生求职信
2013/10/24 职场文书
法院四风对照检查材料思想汇报
2014/10/06 职场文书
基层党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
军训个人总结
2015/03/03 职场文书
邮政营业员岗位职责
2015/04/14 职场文书
公司搬迁通知
2015/04/20 职场文书
护士长2015年终工作总结
2015/04/24 职场文书
因工资原因离职的辞职信范文
2015/05/12 职场文书
MySQL优化之如何写出高质量sql语句
2021/05/17 MySQL
pytorch中[..., 0]的用法说明
2021/05/20 Python
一文教你快速生成MySQL数据库关系图
2022/06/28 Redis