微信js-sdk地理位置接口用法示例


Posted in Javascript onOctober 12, 2016

本文实例讲述了微信js-sdk地理位置接口用法。分享给大家供大家参考,具体如下:

前提,已经在wx.config()中权限验证通过,官方文档地址

官方api

使用微信内置地图查看位置接口

wx.openLocation({
  latitude: 0, // 纬度,浮点数,范围为90 ~ -90
  longitude: 0, // 经度,浮点数,范围为180 ~ -180。
  name: '', // 位置名
  address: '', // 地址详情说明
  scale: 1, // 地图缩放级别,整形值,范围从1~28。默认为最大
  infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
});

获取地理位置接口

wx.getLocation({
  type: 'wgs84', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
  success: function (res) {
    var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
    var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
    var speed = res.speed; // 速度,以米/每秒计
    var accuracy = res.accuracy; // 位置精度
  }
});

实例说明:

1.目前两种类型没有太大区别,经纬度的小数部分稍有点偏差
2.查看位置的infoUrl,测试连接似乎无效

//获取地理位置接口
//wgs84 返回4个值,
//gcj02 返回4个值 ,目前两种类型没有太大区别,经纬度的小数部分稍有点偏差
wx.getLocation({
  type:'wgs84',//默认为wgs84的gps坐标,
  //如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
  success:function(res){
    var latitude=res.latitude;
    var longitude=res.longitude;
    var speed=res.speed;
    var accuracy=res.accuracy;
    appendText('经度:'+latitude+',纬度:'+longitude);
  }
});
wx.getLocation({
  type:'gcj02',
  success:function(res){
    //方法1
    wx.openLocation(res);
    //方法2,详细制定内容
    ////使用微信内置地图查看位置接口
    //wx.openLocation({
    //  latitude: res.latitude, // 纬度,浮点数,范围为90 ~ -90
    //  longitude: res.longitude, // 经度,浮点数,范围为180 ~ -180。
    //  name: '当前位置', // 位置名
    //  address: '当前地址', // 地址详情说明
    //  scale: 1, // 地图缩放级别,整形值,范围从1~28。默认为最大
    //  infoUrl: 'http://www.gongjuji.net' // 在查看位置界面底部显示的超链接,可点击跳转(测试好像不可用)
    //});
  }
});

位置显示如下:

微信js-sdk地理位置接口用法示例

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
AngularJS的表单使用详解
Jun 17 Javascript
使用AngularJS来实现HTML页面嵌套的方法
Jun 17 Javascript
基于javascript数组实现图片轮播
May 02 Javascript
JS 实现计算器详解及实例代码(一)
Jan 08 Javascript
移动端点击态处理的三种实现方式
Jan 12 Javascript
JS中mouseup事件丢失的原因与解决办法
Jun 14 Javascript
AngularJS 仿微信图片手势缩放的实例
Sep 28 Javascript
JS实现的汉字与Unicode码相互转化功能分析
May 25 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
Jun 07 Javascript
详解ES6 Promise对象then方法链式调用
Oct 20 Javascript
详解使用uni-app开发微信小程序之登录模块
May 09 Javascript
微信小程序商品详情页底部弹出框
Nov 22 Javascript
vue.js表格组件开发的实例详解
Oct 12 #Javascript
JavaScript实现页面定时刷新(定时器,meta)
Oct 12 #Javascript
基于Javascript实现文件实时加载进度的方法
Oct 12 #Javascript
Vue.js中数组变动的检测详解
Oct 12 #Javascript
有关文件上传 非ajax提交 得到后台数据问题
Oct 12 #Javascript
jquery动态创建div与input的实例代码
Oct 12 #Javascript
javascript加载xml 并解析各节点的值(实现方法)
Oct 12 #Javascript
You might like
php中strlen和mb_strlen用法实例分析
2016/11/12 PHP
浅谈PHP各环境下的伪静态配置
2019/03/13 PHP
JavaScript入门教程(9) Document文档对象
2009/01/31 Javascript
js判断是否按下了Shift键的方法
2015/01/27 Javascript
在JavaScript中使用NaN值的方法
2015/06/05 Javascript
JavaScript性能优化之小知识总结
2015/11/20 Javascript
js倒计时简单实现代码
2016/08/11 Javascript
Bootstrap面板学习使用
2017/02/09 Javascript
vue中mint-ui的使用方法
2018/04/04 Javascript
详解vue中axios的封装
2018/07/18 Javascript
详解从Vue-router到html5的pushState
2018/07/21 Javascript
微信小程序分享海报生成的实现方法
2018/12/10 Javascript
详解Vue、element-ui、axios实现省市区三级联动
2019/05/07 Javascript
简单了解微信小程序的目录结构
2019/07/01 Javascript
在Vue环境下利用worker运行interval计时器的步骤
2019/08/01 Javascript
vue+iview分页组件的封装
2020/11/17 Vue.js
[01:50]WODOTA制作 DOTA2中文宣传片《HERO》
2013/04/28 DOTA
[02:16]深扒TI7聊天轮盘语音出处2
2017/05/11 DOTA
netbeans7安装python插件的方法图解
2013/12/24 Python
Pandas读写CSV文件的方法示例
2019/03/27 Python
python启动应用程序和终止应用程序的方法
2019/06/28 Python
在keras中获取某一层上的feature map实例
2020/01/24 Python
Flask缓存静态文件的具体方法
2020/08/02 Python
python3爬虫中多线程的优势总结
2020/11/24 Python
中国电视购物:快乐购
2017/02/04 全球购物
加拿大领先的优质厨具产品在线购物网站:Golda’s Kitchen
2017/11/17 全球购物
中医专业职业生涯规划书范文
2014/01/04 职场文书
办理生育手续介绍信
2014/01/14 职场文书
2014年护士长工作总结
2014/11/11 职场文书
2014年远程教育工作总结
2014/12/09 职场文书
挂靠协议书
2015/01/27 职场文书
地球一小时活动总结
2015/02/27 职场文书
中标通知书格式
2015/04/17 职场文书
幼儿园迎新生欢迎词
2015/09/30 职场文书
Python 如何实现文件自动去重
2021/06/02 Python
Redis性能监控的实现
2021/07/09 Redis