微信小程序 获取当前地理位置和经纬度实例代码


Posted in Javascript onDecember 05, 2016

微信小程序实例-获取当前的地理位置、经纬度

微信小程序官方文档

https://mp.weixin.qq.com/debug/wxadoc/dev/api/location.html

JS代码

//index.js
//获取应用实例
var app = getApp()
Page({
 data: {
  motto: '示例小程序-获取当前地理位、速度',
  userInfo: {},
  hasLocation:false,
  location:{}
 },
 //事件处理函数
 bindViewTap: function() {
  wx.navigateTo({
   url: '../logs/logs'
  })
 },
 onLoad: function () {
  console.log('onLoad')
  var that = this
  //调用应用实例的方法获取全局数据
  app.getUserInfo(function(userInfo){
   //更新数据
   that.setData({
    userInfo:userInfo
   })
  }),
   wx.getLocation( {
   success: function( res ) {
    console.log( res )
    that.setData( {
     hasLocation: true,
     location: {
      longitude: res.longitude,
      latitude: res.latitude
     }
    })
   }
  })
 }
})

index.wxml

<!--index.wxml-->
<view class="container">
 <view bindtap="bindViewTap" class="userinfo">
  <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
  <text class="userinfo-nickname">{{userInfo.nickName}}</text>
 </view>
 <view class="usermotto">
  <!-- <text class="user-motto">{{motto}}\n</text>-->
  <text>经度:{{location.longitude}}\n</text>
  <text>纬度:{{location.latitude}}</text>
 </view>
</view>

运行效果

微信小程序 获取当前地理位置和经纬度实例代码

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
一个可以显示阴历的JS代码
Mar 05 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
Jan 24 Javascript
详解JavaScript对象序列化
Jan 19 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
May 05 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
Dec 27 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
Mar 09 Javascript
Vue.js 事件修饰符的使用教程
Nov 01 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
Sep 25 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
Mar 07 Javascript
VUE实时监听元素距离顶部高度的操作
Jul 29 Javascript
vue绑定数字类型 value为数字的实例
Aug 31 Javascript
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 Vue.js
Servlet实现文件上传,可多文件上传示例
Dec 05 #Javascript
微信小程序 textarea 详解及简单使用方法
Dec 05 #Javascript
解析Javascript单例模式概念与实例
Dec 05 #Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
Dec 05 #Javascript
深入理解jQuery()方法的构建原理
Dec 05 #Javascript
jQuery控制控件文本的长度的操作方法
Dec 05 #Javascript
浅析Ajax语法
Dec 05 #Javascript
You might like
Javascript this关键字使用分析
2008/10/21 Javascript
关于COOKIE个数与大小的问题
2011/01/17 Javascript
鼠标滑上去后图片放大浮出效果的js代码
2011/05/28 Javascript
密码强度检测效果实现原理与代码
2013/01/04 Javascript
jQuery判断一个元素是否可见的方法
2015/06/05 Javascript
微信小程序实现实时圆形进度条的方法示例
2017/02/24 Javascript
angularjs+bootstrap菜单的使用示例代码
2017/03/07 Javascript
JS实现调用本地摄像头功能示例
2018/05/18 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
2019/04/28 Javascript
基于原生js实现九宫格算法代码实例
2020/07/03 Javascript
Vue filter 过滤器、以及在table中的使用介绍
2020/09/07 Javascript
Python处理JSON数据并生成条形图
2016/08/05 Python
用十张图详解TensorFlow数据读取机制(附代码)
2018/02/06 Python
Python读取mat文件,并转为csv文件的实例
2018/07/04 Python
Python 2.7中文显示与处理方法
2018/07/16 Python
pytorch 可视化feature map的示例代码
2019/08/20 Python
Python with语句和过程抽取思想
2019/12/23 Python
python实现密码强度校验
2020/03/18 Python
python 瀑布线指标编写实例
2020/06/03 Python
屈臣氏乌克兰:Watsons UA
2019/10/29 全球购物
C++面试题目
2013/06/25 面试题
介绍一下Make? 为什么使用make
2016/07/31 面试题
UNIX文件系统分类
2014/11/11 面试题
教师现实表现材料
2014/02/14 职场文书
上课看小说检讨书
2014/02/22 职场文书
优秀会计求职信
2014/07/04 职场文书
思想作风建设心得体会
2014/10/22 职场文书
离婚被告代理词
2015/05/23 职场文书
单位收入证明范本
2015/06/18 职场文书
母亲节感言
2015/08/03 职场文书
经典祝酒词大全
2015/08/12 职场文书
2015年乡镇组织委员工作总结
2015/10/23 职场文书
情况说明书格式及范文
2019/06/24 职场文书
python编程实现清理微信重复缓存文件
2021/11/01 Python
CSS实现渐变色边框(Gradient borders)的5种方法
2022/03/25 HTML / CSS
在python中读取和写入CSV文件详情
2022/06/28 Python