微信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 相关文章推荐
网页和浏览器兼容性问题汇总(draft1)
Jun 01 Javascript
表单元素事件 (Form Element Events)
Jul 17 Javascript
编写可维护面向对象的JavaScript代码[翻译]
Feb 12 Javascript
解析Jquery的LigerUI如何实现文件上传
Jul 09 Javascript
DVA框架统一处理所有页面的loading状态
Aug 25 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
Sep 25 Javascript
webpack 打包压缩js和css的方法示例
Mar 20 Javascript
详解滑动穿透(锁body)终极探索
Apr 16 Javascript
Vue源码解析之数据响应系统的使用
Apr 24 Javascript
Vue侦测相关api的实现方法
May 22 Javascript
Openlayers实现地图全屏显示
Sep 28 Javascript
详解vue身份认证管理和租户管理
May 25 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
sqlyog 中文乱码问题的设置方法
2008/10/19 PHP
PHP 的异常处理、错误的抛出及回调函数等面向对象的错误处理方法
2012/12/07 PHP
浅析PKI加密解密 OpenSSL
2013/07/01 PHP
PHP获取中英混合字符串长度的方法
2014/06/07 PHP
smarty内置函数foreach用法实例
2015/01/22 PHP
PHP实现从远程下载文件的方法
2015/03/12 PHP
PHP 5.6.11 访问SQL Server2008R2的几种情况详解
2016/08/08 PHP
PHP 模拟登陆功能实例详解
2019/09/10 PHP
Javascript中的this绑定介绍
2011/09/22 Javascript
jQuery.validate 常用方法及需要注意的问题
2013/03/20 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
2015/08/04 Javascript
JS实现网页标题随机显示名人名言的方法
2015/11/03 Javascript
轻松实现javascript图片轮播特效
2016/01/13 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
2017/03/01 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
2017/03/10 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
2017/10/12 Javascript
iview日期控件,双向绑定日期格式的方法
2018/03/15 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
2019/04/28 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
2020/03/23 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
2020/05/29 jQuery
[08:04]TI4西雅图DOTA2前线报道 海涛探访各路人马
2014/07/09 DOTA
[00:32]2018DOTA2亚洲邀请赛iG出场
2018/04/03 DOTA
利用Python和OpenCV库将URL转换为OpenCV格式的方法
2015/03/27 Python
详解Python的迭代器、生成器以及相关的itertools包
2015/04/02 Python
python的Crypto模块实现AES加密实例代码
2018/01/22 Python
Python实现蒙特卡洛算法小实验过程详解
2019/07/12 Python
Django 重写用户模型的实现
2019/07/29 Python
python中如何写类
2020/06/29 Python
澳大利亚最大的网上油画销售画廊:Direct Art Australia
2018/04/15 全球购物
高三自我评价
2014/02/01 职场文书
环保建议书作文
2014/03/12 职场文书
电大毕业个人生自我鉴定
2014/03/26 职场文书
工商管理专业毕业生自我鉴定2014
2014/10/04 职场文书
学校党支部公开承诺书
2015/04/30 职场文书
详解SpringBoot异常处理流程及原理
2021/06/21 Java/Android
教你使用Ubuntu搭建DNS服务器
2022/09/23 Servers