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


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中汉字显示乱码问题(已解决)
Dec 27 Javascript
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
Jun 04 Javascript
jquery.validate使用攻略 第一部
Jul 01 Javascript
JS 弹出层 定位至屏幕居中示例
May 21 Javascript
使用javascript实现雪花飘落的效果
Jan 13 Javascript
JavaScript每天必学之基础知识
Sep 17 Javascript
微信小程序入门教程
Nov 18 Javascript
jQuery用FormData实现文件上传的方法
Nov 21 Javascript
Webpack中loader打包各种文件的方法实例
Sep 03 Javascript
JavaScript实现简单随机点名器
Nov 21 Javascript
在Vue中使用Select选择器拼接label的操作
Oct 22 Javascript
二维码条形码生成的JavaScript脚本库
Jul 07 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
MayFish PHP的MVC架构的开发框架
2009/08/13 PHP
php checkbox复选框值的获取与checkbox默认值输出方法
2010/05/15 PHP
PHP中使用BigMap实例
2015/03/30 PHP
php 实现一个字符串加密解密的函数实例代码
2016/11/01 PHP
基于jquery的用鼠标画出可移动的div
2012/09/06 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
2013/01/24 Javascript
JavaScript编写推箱子游戏
2015/07/07 Javascript
jQuery 生成svg矢量二维码
2016/08/09 Javascript
javascript加载xml 并解析各节点的值(实现方法)
2016/10/12 Javascript
Javascript中return的使用与闭包详解
2017/01/11 Javascript
利用angularjs1.4制作的简易滑动门效果
2017/02/28 Javascript
bootstrap table插件的分页与checkbox使用详解
2017/07/23 Javascript
JS实现运动缓冲效果的封装函数示例
2018/02/18 Javascript
详解React native fetch遇到的坑
2018/08/30 Javascript
Vue中util的工具函数实例详解
2019/07/08 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
2019/10/25 Javascript
vue组件实现移动端九宫格转盘抽奖
2020/10/16 Javascript
在vue项目中 实现定义全局变量 全局函数操作
2020/10/26 Javascript
Python检测网站链接是否已存在
2016/04/07 Python
python制作爬虫爬取京东商品评论教程
2016/12/16 Python
Python贪吃蛇游戏编写代码
2020/10/26 Python
机器学习10大经典算法详解
2017/12/07 Python
python+tkinter编写电脑桌面放大镜程序实例代码
2018/01/16 Python
基于Python开发chrome插件的方法分析
2018/07/07 Python
python实现几种归一化方法(Normalization Method)
2019/07/31 Python
Python安装OpenCV的示例代码
2020/03/05 Python
python读取excel进行遍历/xlrd模块操作
2020/07/12 Python
python3中编码获取网页的实例方法
2020/11/16 Python
python中_del_还原数据的方法
2020/12/09 Python
JSF面试题:Jsf中导航的标签是什么
2013/04/20 面试题
三八妇女节超市活动方案
2014/08/18 职场文书
车辆委托书范本
2014/10/05 职场文书
部队2015年终工作总结
2015/04/02 职场文书
pytorch中F.avg_pool1d()和F.avg_pool2d()的使用操作
2021/05/22 Python
python析构函数用法及注意事项
2021/06/22 Python
Javascript中async与await的捕捉错误详解
2022/03/03 Javascript