微信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 相关文章推荐
JavaScript中的null和undefined解析
Apr 14 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
Aug 09 Javascript
一个简单的瀑布流效果(主体形式自写)
May 27 Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
Jun 24 Javascript
js模糊查询实例分享
Dec 26 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
Jan 04 Javascript
JS实现的数字格式化功能示例
Feb 10 Javascript
深入浅析js原型链和vue构造函数
Oct 25 Javascript
vue element upload实现图片本地预览
Aug 20 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
Jun 28 Javascript
小程序实现上传视频功能
Aug 18 Javascript
Vue的生命周期一起来看看
Feb 24 Vue.js
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
ThinkPHP分组下自定义标签库实例
2014/11/01 PHP
cakephp2.X多表联合查询join及使用分页查询的方法
2017/02/23 PHP
PHP封装的验证码工具类定义与用法示例
2018/08/22 PHP
Centos7.7 64位利用本地完整安装包安装lnmp/lamp套件教程
2021/03/09 Servers
FF IE兼容性的修改小结
2009/09/02 Javascript
jquery last-child 列表最后一项的样式
2010/01/22 Javascript
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
2010/03/15 Javascript
Javascript实现动态菜单添加的实例代码
2013/07/05 Javascript
js的toUpperCase方法用法实例
2015/01/27 Javascript
浅析JS操作DOM的一些常用方法
2016/05/13 Javascript
深入解析Javascript闭包的功能及实现方法
2016/07/10 Javascript
轻松实现js弹框显示选项
2016/09/13 Javascript
HTML页面定时跳转方法解析(2种任选)
2016/12/22 Javascript
Vue自定义属性实例分析
2019/02/23 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
2019/09/27 Javascript
微信小程序批量上传图片到七牛(推荐)
2019/12/19 Javascript
JS实现transform实现扇子效果
2020/01/17 Javascript
JavaScript canvas实现雪花随机动态飘落
2020/02/08 Javascript
vue总线机制(bus)知识点详解
2020/05/10 Javascript
浅谈实现在线预览PDF的几种解决办法
2020/08/10 Javascript
openlayers4.6.5实现距离量测和面积量测
2020/09/25 Javascript
Python警察与小偷的实现之一客户端与服务端通信实例
2014/10/09 Python
python实现简单温度转换的方法
2015/03/13 Python
Python中http请求方法库汇总
2016/01/06 Python
使用python爬取B站千万级数据
2018/06/08 Python
浅析python的优势和不足之处
2018/11/20 Python
python基于SMTP协议发送邮件
2019/05/31 Python
Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例
2019/06/04 Python
Matplotlib使用字符串代替变量绘制散点图的方法
2020/02/17 Python
Python参数传递对象的引用原理解析
2020/05/22 Python
css3实现一个div设置多张背景图片及background-image属性实例演示
2017/08/10 HTML / CSS
eBay意大利购物网站:eBay.it
2019/09/04 全球购物
模范教师事迹材料
2014/02/10 职场文书
小班开学寄语
2014/04/04 职场文书
民族团结先进个人事迹材料
2014/06/02 职场文书
英文慰问信范文
2015/03/24 职场文书