微信小程序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与Prototype并存的冲突的解决方法
Aug 29 Javascript
利用javascript/jquery对上传文件格式过滤的方法
Jul 25 Javascript
调用HttpHanlder的几种返回方式小结
Dec 20 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
Feb 19 Javascript
搭建Bootstrap离线文档的方法
Dec 02 Javascript
浅析bootstrap原理及优缺点
Mar 19 Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
Jul 11 Javascript
vue中子组件调用兄弟组件方法
Jul 06 Javascript
微信小程序实现的动态设置导航栏标题功能示例
Jan 31 Javascript
微信小程序实现简单文字跑马灯
May 26 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
Jul 18 Javascript
openlayers 3实现车辆轨迹回放
Sep 24 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
在PHP中操作Excel实例代码
2010/04/29 PHP
php递归函数中使用return的注意事项
2014/01/17 PHP
php类自动加载器实现方法
2015/07/28 PHP
一个简单的php路由类
2016/05/29 PHP
php自定义函数实现二维数组按指定key排序的方法
2016/09/29 PHP
PHP中strtr与str_replace函数运行性能简单测试示例
2019/06/22 PHP
jQuery MD5加密实现代码
2010/03/15 Javascript
ExtJS 设置级联菜单的默认值
2010/06/13 Javascript
js使下拉列表框可编辑不止是选择
2013/12/12 Javascript
js的toLowerCase方法用法实例
2015/01/27 Javascript
vue.js入门教程之基础语法小结
2016/09/01 Javascript
jQuery简单实现列表隐藏和显示效果示例
2016/09/12 Javascript
Javascript刷新页面的实例
2017/09/23 Javascript
Router解决跨模块下的页面跳转示例
2018/01/11 Javascript
r.js来合并压缩css文件的示例
2018/04/26 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
2019/04/09 Javascript
详解js根据百度地图提供经纬度计算两点距离
2019/05/13 Javascript
vue 使用鼠标滚动加载数据的例子
2019/10/31 Javascript
javascript设计模式之迭代器模式
2020/01/30 Javascript
如何在 Vue 表单中处理图片
2021/01/26 Vue.js
解决PyCharm import torch包失败的问题
2018/10/13 Python
python多线程案例之多任务copy文件完整实例
2019/10/29 Python
详解在python操作数据库中游标的使用方法
2019/11/12 Python
Java如何基于wsimport调用wcf接口
2020/06/17 Python
html5定位获取当前位置并在百度地图上显示
2014/08/22 HTML / CSS
国家地理在线商店:Shop National Geographic
2018/06/30 全球购物
美国知名的隐形眼镜电商:Contacts America
2019/11/19 全球购物
TCP/IP的分层模型
2013/10/27 面试题
社区工作感言
2014/02/21 职场文书
高校优秀辅导员事迹材料
2014/05/07 职场文书
篮球比赛拉拉队口号
2014/06/10 职场文书
护士节活动总结
2014/08/29 职场文书
暑假学习心得体会
2014/09/02 职场文书
党员转正介绍人意见
2015/06/03 职场文书
详解Java七大阻塞队列之SynchronousQueue
2021/09/04 Java/Android
在Centos 8.0中安装Redis服务器的教程详解
2022/03/21 Redis