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


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 相关文章推荐
层序遍历在ExtJs的TreePanel中的应用
Oct 16 Javascript
JavaScript获取onclick、onchange等事件值的代码
Jul 22 Javascript
jquery 字符串切割函数substring的用法说明
Feb 11 Javascript
javascript浏览器窗口之间传递数据的方法
Jan 20 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
Aug 24 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
Apr 17 Javascript
JS实现队列的先进先出功能示例
May 10 Javascript
Angular排序实例详解
Jun 28 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
Angular Excel 导入与导出的实现代码
Apr 17 Javascript
JavaScript实现留言板案例
Mar 17 Javascript
Vue初始化中的选项合并之initInternalComponent详解
Jun 11 Javascript
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
php多任务程序实例解析
2014/07/19 PHP
php+mysqli使用预处理技术进行数据库查询的方法
2015/01/28 PHP
javascript 日期时间函数(经典+完善+实用)
2009/05/27 Javascript
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
2009/07/19 Javascript
浅析hasOwnProperty方法的应用
2013/11/20 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
2014/05/04 Javascript
下拉框select的绑定示例
2014/09/04 Javascript
javascript使用smipleChart实现简单图表
2015/01/02 Javascript
jQuery检查事件是否触发的方法
2015/06/26 Javascript
javascript实现label标签跳出循环操作
2016/03/06 Javascript
基于JS模仿windows文件按名称排序效果
2016/06/29 Javascript
ES2015 Symbol 一种绝不重复的值
2016/12/25 Javascript
jQuery实现的简单拖动层示例
2017/02/22 Javascript
vue 文件目录结构详解
2017/11/24 Javascript
Angular17之Angular自定义指令详解
2018/01/21 Javascript
Vue2.2.0+新特性整理及注意事项
2018/08/22 Javascript
JS开发 富文本编辑器TinyMCE详解
2019/07/19 Javascript
webpack的tree shaking的实现方法
2019/09/18 Javascript
Python解析命令行读取参数--argparse模块使用方法
2018/01/23 Python
基于Django ORM、一对一、一对多、多对多的全面讲解
2019/07/26 Python
python 数据分析实现长宽格式的转换
2020/05/18 Python
html5 input元素新特性_动力节点Java学院整理
2017/07/06 HTML / CSS
html5实现canvas阴影效果示例
2014/05/07 HTML / CSS
巴西食品补充剂在线零售商:Músculos na Web
2017/08/07 全球购物
土耳其新趋势女装购物网站:Addax
2020/01/07 全球购物
this关键字的含义
2015/04/08 面试题
测控技术与仪器个人求职信范文
2013/12/30 职场文书
人力资源部副职的竞聘演讲稿
2014/01/07 职场文书
企业总经理职责
2014/02/02 职场文书
2014党支部对照检查材料思想汇报
2014/10/05 职场文书
2014年内勤工作总结
2014/11/24 职场文书
2015年建党94周年演讲稿
2015/03/19 职场文书
2015员工年度考核评语
2015/03/25 职场文书
深度学习小工程练习之垃圾分类详解
2021/04/14 Python
MySQL的join buffer原理
2021/04/29 MySQL
weblogic服务建立数据源连接测试更新mysql驱动包的问题及解决方法
2022/01/22 MySQL