微信小程序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下json数组的操作实现代码
Aug 09 Javascript
JQueryEasyUI datagrid框架的基本使用
Apr 08 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
Jun 11 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
Dec 23 Javascript
Angularjs中controller的三种写法分享
Sep 21 Javascript
基于Vue.js实现简单搜索框
Mar 26 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
Jun 01 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
Feb 08 Javascript
vue-for循环嵌套操作示例
Jan 28 Javascript
koa+mongoose实现简单增删改查接口的示例代码
May 13 Javascript
Vue的路由及路由钩子函数的实现
Jul 02 Javascript
vue实现页面切换滑动效果
Jun 29 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
《猛禽小队》:DC宇宙的又一超级大烂片
2020/04/09 欧美动漫
php面向对象全攻略 (十一)__toString()用法 克隆对象 __call处理调用错误
2009/09/30 PHP
分享十款最出色的PHP安全开发库中文详细介绍
2015/03/22 PHP
php轻松实现文件上传功能
2016/03/03 PHP
删除PHP数组中头部、尾部、任意元素的实现代码
2017/04/10 PHP
响应鼠标变换表格背景或者颜色的代码
2009/03/30 Javascript
简单实例处理url特殊符号&amp;处理(2种方法)
2013/04/02 Javascript
鼠标焦点离开文本框时验证的js代码
2013/07/19 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
2014/09/01 Javascript
JavaScript前端图片加载管理器imagepool使用详解
2014/12/29 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
2015/12/09 Javascript
jQuery处理XML文件的几种方法
2016/06/14 Javascript
Bootstrap Navbar Component实现响应式导航
2016/10/08 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
2016/12/14 Javascript
ionic开发中点击input时键盘自动弹出
2016/12/23 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
2016/12/28 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
2017/04/23 Javascript
微信JSSDK调用微信扫一扫功能的方法
2017/07/25 Javascript
在vue中使用echarts图表实例代码详解
2018/10/22 Javascript
新版小程序登录授权的方法
2018/12/12 Javascript
解决layUI的页面显示不全的问题
2019/09/20 Javascript
[01:22:42]2014 DOTA2华西杯精英邀请赛 5 24 DK VS LGD
2014/05/26 DOTA
[02:41]《西雅图我们来了》2015国际邀请赛出征全记录
2015/07/23 DOTA
深入理解Python中range和xrange的区别
2017/11/26 Python
python3.6.3安装图文教程 TensorFlow安装配置方法
2020/06/24 Python
详解【python】str与json类型转换
2019/04/29 Python
html5实现多文件的上传示例代码
2014/02/13 HTML / CSS
Jimmy Choo美国官网:周仰杰鞋子品牌
2018/06/08 全球购物
Rossignol金鸡美国官网:始于1907年法国百年雪具品牌
2019/03/06 全球购物
捷克母婴用品购物网站:Feedo.cz
2020/12/28 全球购物
腾讯技术类校园招聘笔试试题
2014/05/06 面试题
了解AppleTalk协议吗
2014/04/01 面试题
机械设计专业应届生求职信
2013/11/21 职场文书
党员一帮一活动总结
2014/07/08 职场文书
药店收银员岗位职责
2015/04/07 职场文书
使用Django框架创建项目
2022/06/10 Python