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


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 相关文章推荐
jquery(live)中File input的change方法只起一次作用的解决办法
Oct 21 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
Feb 19 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
Feb 23 Javascript
JS运动基础框架实例分析
Mar 03 Javascript
Angular ng-repeat 对象和数组遍历实例
Sep 14 Javascript
Angularjs中的页面访问权限怎么设置
Nov 11 Javascript
详解node如何让一个端口同时支持https与http
Jul 04 Javascript
前端防止用户重复提交js实现代码示例
Sep 07 Javascript
详解vue 数组和对象渲染问题
Sep 21 Javascript
vue2中引用及使用 better-scroll的方法详解
Nov 15 Javascript
vue写h5页面的方法总结
Feb 12 Javascript
基于vue中的scoped坑点解说
Sep 04 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
多文件上载系统完整版
2006/10/09 PHP
PHP学习之整理字符串
2011/04/17 PHP
Java和PHP在Web开发方面对比分析
2015/03/01 PHP
Yii2创建多界面主题(Theme)的方法
2016/10/08 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
2009/11/27 Javascript
Javascript核心读书有感之语言核心
2015/02/01 Javascript
基于JS实现bookstore静态页面的实例代码
2017/02/22 Javascript
JavaScript中offsetWidth的bug及解决方法
2017/05/17 Javascript
基于JavaScript实现多级菜单效果
2017/07/25 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
2018/01/22 jQuery
Vue实现6位数密码效果
2018/08/18 Javascript
angularjs请求数据的方法示例
2019/08/06 Javascript
[39:07]LGD vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
python检查序列seq是否含有aset中项的方法
2015/06/30 Python
Python 遍历列表里面序号和值的方法(三种)
2017/02/17 Python
python使用插值法画出平滑曲线
2018/12/15 Python
python实现邮件发送功能
2019/08/10 Python
tensorboard显示空白的解决
2020/02/15 Python
PyQt5连接MySQL及QMYSQL driver not loaded错误解决
2020/04/29 Python
scrapy处理python爬虫调度详解
2020/11/23 Python
如何用tempfile库创建python进程中的临时文件
2021/01/28 Python
一款纯css3实现的漂亮的404页面的实例教程
2014/11/27 HTML / CSS
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
2018/10/08 HTML / CSS
我看到了用指针调用函数的不同语法形式
2014/07/16 面试题
XML文档面试题
2015/08/05 面试题
Jdbc数据访问技术面试题
2012/03/30 面试题
计算机专业大学生的自我评价
2013/11/14 职场文书
旅行社各个岗位职责
2014/03/15 职场文书
2014年教师节国旗下讲话稿
2014/09/10 职场文书
“四风”问题的主要表现和危害思想汇报
2014/09/19 职场文书
思想作风建设心得体会
2014/10/22 职场文书
先进个人评语大全
2015/01/04 职场文书
客服专员岗位职责
2015/02/10 职场文书
火烧圆明园观后感
2015/06/03 职场文书
SpringBoot2零基础到精通之数据库专项精讲
2022/03/22 Java/Android