微信小程序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 相关文章推荐
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
Nov 04 Javascript
JS 的应用开发初探(mootools)
Dec 19 Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
Jan 04 Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
Feb 05 Javascript
JS下载文件|无刷新下载文件示例代码
Apr 17 Javascript
jQuery内部原理和实现方式浅析
Feb 03 Javascript
jQuery UI Bootstrap是什么?
Jun 17 Javascript
浅析jQuery Ajax通用js封装
Jun 22 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
Oct 19 Javascript
BootStrap网页中代码显示用法详解
Oct 21 Javascript
使用vue制作FullPage页面滚动效果
Aug 21 Javascript
利用不到200行代码写一款属于你自己的js类库
Jul 08 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
adodb与adodb_lite之比较
2006/12/31 PHP
PHP Document 代码注释规范
2009/04/13 PHP
php学习笔记 面向对象的构造与析构方法
2011/06/13 PHP
destoon实现资讯信息前面调用它所属分类的方法
2014/07/15 PHP
php实现session自定义会话处理器的方法
2015/01/27 PHP
php验证码生成器
2017/05/24 PHP
浅析php如何实现爬取数据原理
2018/09/27 PHP
用javascript实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
2007/08/15 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
2011/10/16 Javascript
javascript中关于break,continue的特殊用法与介绍
2012/05/24 Javascript
script标签属性type与language使用选择
2012/12/02 Javascript
php 中序列化和json使用介绍
2013/07/08 Javascript
JavaScript极简入门教程(一):基础篇
2014/10/25 Javascript
关于编写性能高效的javascript事件的技术
2014/11/28 Javascript
JavaScript检测实例属性, 原型属性
2015/02/04 Javascript
Jquery使用css方法改变样式实例
2015/05/18 Javascript
jQuery validate插件实现ajax验证重复的2种方法
2016/01/22 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
2016/03/31 Javascript
AngularJS中的API(接口)简单实现
2016/07/28 Javascript
js字符串操作总结(必看篇)
2016/11/22 Javascript
JavaScript仿微信打飞机游戏
2020/07/05 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
2017/11/22 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
2018/01/06 jQuery
使用Javascript简单计算器
2018/11/17 Javascript
JavaScript对象属性操作实例解析
2020/02/04 Javascript
vue-cli4使用全局less文件中的变量配置操作
2020/10/21 Javascript
vue项目中js-cookie的使用存储token操作
2020/11/13 Javascript
Python3计算三角形的面积代码
2017/12/18 Python
python爬虫获取新浪新闻教学
2018/12/23 Python
基于Html5实现的语音搜索功能
2019/05/13 HTML / CSS
Betsey Johnson官网:妖娆可爱的连衣裙及鞋子、手袋和配件
2016/12/30 全球购物
CAT鞋美国官网:CAT Footwear
2017/11/27 全球购物
Lampegiganten丹麦:欧洲领先的照明网上商店
2018/04/25 全球购物
管事部库房保管员岗位职责
2014/02/21 职场文书
婚内房产协议书范本
2014/10/02 职场文书
MySQL Server层四个日志的实现
2022/03/31 MySQL