微信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 相关文章推荐
JSON传递bool类型数据的处理方式介绍
Sep 18 Javascript
jquery(hide方法)隐藏指定元素实例
Nov 11 Javascript
javascript元素动态创建实现方法
May 13 Javascript
jquery实现下拉框多选方法介绍
Jan 03 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
Aug 25 Javascript
JS实现百度搜索接口及链接功能实例代码
Feb 02 Javascript
React之PureComponent的使用作用
Jul 10 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
Jul 25 Javascript
vue单页缓存存在的问题及解决方案(小结)
Sep 25 Javascript
微信小程序使用map组件实现路线规划功能示例
Jan 22 Javascript
JS实现使用POST方式发送请求
Aug 30 Javascript
JS+JQuery实现无缝连接轮播图
Dec 30 jQuery
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中HTTP方式下的Gzip压缩传输方法举偶
2007/02/15 PHP
PHP开发的微信现金红包功能示例
2017/06/29 PHP
Yii框架where查询用法实例分析
2019/10/22 PHP
Thinkphp 框架基础之入口文件功能、定义与用法分析
2020/04/27 PHP
用Div仿showModalDialog模式菜单的效果的代码
2007/03/05 Javascript
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
2007/03/06 Javascript
测试JavaScript字符串处理性能的代码
2009/12/07 Javascript
DD_belatedPNG,IE6下PNG透明解决方案(国外)
2010/12/06 Javascript
node.js中的http.request方法使用说明
2014/12/14 Javascript
jQuery EasyUI封装简化操作
2016/09/18 Javascript
浅谈js的ajax的异步和同步请求的问题
2016/10/07 Javascript
JavaScript生成.xls文件的代码
2016/12/22 Javascript
微信小程序 出现错误:{"baseresponse":{"errcode":-80002,"errmsg":""}}解决办法
2017/02/23 Javascript
Vue路由跳转问题记录详解
2017/06/15 Javascript
JavaScript之Date_动力节点Java学院整理
2017/06/28 Javascript
webpack教程之webpack.config.js配置文件
2017/07/05 Javascript
vue组件中使用iframe元素的示例代码
2017/12/13 Javascript
vuex实现的简单购物车功能示例
2019/02/13 Javascript
运用js实现图层拖拽的功能
2019/05/24 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
2019/08/08 Javascript
24个解决实际问题的ES6代码片段(小结)
2020/02/02 Javascript
Python基本数据类型详细介绍
2014/03/11 Python
对python中执行DOS命令的3种方法总结
2018/05/12 Python
Python自定义函数计算给定日期是该年第几天的方法示例
2019/05/30 Python
python实现拼图小游戏
2020/02/22 Python
Python+OpenCV实现图像的全景拼接
2020/03/05 Python
纯CSS3实现的阴影效果
2014/12/24 HTML / CSS
Bose英国官方网站:美国知名音响品牌
2020/01/26 全球购物
俄罗斯购买自行车网站:Vamvelosiped
2021/01/29 全球购物
广州地球村科技数据库题目
2016/04/25 面试题
什么是lambda函数
2013/09/17 面试题
春节联欢晚会主持词范文
2014/03/24 职场文书
2015年档案室工作总结
2015/05/23 职场文书
结婚喜宴迎宾词
2015/08/10 职场文书
python自动化测试之Selenium详解
2022/03/13 Python
带你了解Java中的ForkJoin
2022/04/28 Java/Android