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

 更新时间:2019年08月05日 16:35:18   作者:dq_095  
这篇文章主要介绍了微信小程序3种位置API的使用方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

获取位置

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

wx.getLocation(object)

<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

wx.chooseLocation(object)

<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
    })
   }
  })
 }
})

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

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

wx.openLocation(OBJECT)

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

相关文章

  • JavaScript闭包详解

    JavaScript闭包详解

    一分钟理解JavaScript闭包,关于JavaScript闭包的内容介绍了很多,本文带着大家快速理解什么是JavaScript闭包,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • js动态添加带圆圈序号列表的实例代码

    js动态添加带圆圈序号列表的实例代码

    这篇文章主要介绍了js动态添加带圆圈序号列表的实例代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-02-02
  • JavaScript 高效运行代码分析

    JavaScript 高效运行代码分析

    传统上,网页中不会有大量的脚本,至少脚本很少会影响网页的性能。
    2010-03-03
  • JS将表单导出成EXCEL的实例代码

    JS将表单导出成EXCEL的实例代码

    这是写好的例子可以测试一下就明白了,有需要的朋友可以参考一下
    2013-11-11
  • css和js实现弹出登录居中界面完整代码

    css和js实现弹出登录居中界面完整代码

    这篇文章主要介绍了css和js实现弹出登录居中界面,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-11-11
  • JavaScript中的boolean布尔值使用学习及相关技巧讲解

    JavaScript中的boolean布尔值使用学习及相关技巧讲解

    JavaScript中的boolean布尔值使用学习及相关技巧讲解,特别是Boolean的用法以及适用!!将truthy或falsy值转换为布尔值的用法非常巧妙,需要的朋友可以参考下
    2016-05-05
  • 老生常谈document.ready和window.onload

    老生常谈document.ready和window.onload

    这篇文章主要介绍了document.ready和window.onload的相关知识,包括document.ready和window.onload的区别,要使用document.ready()或者document.onload()的原因分析,本文结合实例代码给大家介绍的非常详细,需要的朋友参考下吧
    2024-01-01
  • 灵活使用console让js调试更简单的方法步骤

    灵活使用console让js调试更简单的方法步骤

    这篇文章主要介绍了灵活使用console让js调试更简单的方法步骤,适当使用这些方法可以使调试更容易,更快速,更直观,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04
  • js验证整数加保留小数点的简单实例

    js验证整数加保留小数点的简单实例

    这篇文章主要介绍了js验证整数加保留小数点的简单实例,有需要的朋友可以参考一下
    2013-12-12
  • javascript数组排序汇总

    javascript数组排序汇总

    本文给大家汇总了一下javascript的数组排序算法,包括冒泡排序、快速排序、插入排序、希尔排序,希望对大家熟悉javascript数组排序能够有所帮助。
    2015-07-07

最新评论