JavaScript微信定位功能实现方法


Posted in Javascript onNovember 29, 2016

分享下微信是如何定位的:

本文主要讲解如何利用微信定位,如何将定位到的经纬度转换为百度地图对应的经纬度,以及处理定位失败、取消及错误时的默认做法。

//获取地理位置信息start
//封装成一个函数
 function getPosition() {
 //用ajax请求
  $.ajax({
   url: "/wechat/jssdk",//请求地址
   type: 'post',//post请求
   dataType: 'json',
   contentType: "application/x-www-form-urlencoded; charset=utf-8",
   data: {
    'url': location.href.split('#')[0]//将第一个#号前的地址传递
   },
//请求成功的函数
   success: function (data) {
    wx.config({
     // debug: true,
     appId: data.data.appId,
     timestamp: data.data.timestamp,
     nonceStr: data.data.nonceStr,
     signature: data.data.signature,
     jsApiList: ['checkJsApi', 'getLocation']
    });
    wx.ready(function () {
     wx.getLocation({
     //获得定位成功
      success: function (res) {
      //这是微信返回的真正经纬度
       var oldLat = res.latitude; // 纬度,浮点数,范围为90 ~ -90
       var oldLng = res.longitude; // 经度,浮点数,范围为180 ~ -180。
       /*下面是为了将获得的真正经纬度转换为对应的百度经纬度,因为是利用百度地图的经纬度去查询数据的,数据库中存的也是百度的经纬度*/
       //创建一个百度地图的点
       var customerPoint = new BMap.Point(oldLng, oldLat);
       //
       var convertor = new BMap.Convertor();

       var pointArr = [];//创建一个数组
       pointArr.push(customerPoint);//将刚才的点放进去
       convertor.translate(pointArr, 1, 5, initMap); //转换坐标
       function initMap(data) {
        if (data.status === 0) {//转换成功
         var point = data.points[0];//得到后的点
         var lng = point.lng;//获得转换后的经度
         var lat = point.lat;//获得转换后的纬度
         toDoFunction(lng, lat);//将经纬度传入到要运用的函数中
        } else {
        //下面两行是默认定位到西湖的经纬度
         lng = 120.141375;
         lat = 30.257806;
         toDoFunction(lng, lat);//将经纬度传入到要运用的函数中
        }
       }

      },
      //取消定位
      cancel: function () {
      //下面两行是默认定位到西湖的经纬度
       var lng = 120.141375;
       var lat = 30.257806;
       toDoFunction(lng, lat);//将经纬度传入到要运用的函数中
      },
      //定位失败
      fail: function () {
      //下面两行是默认定位到西湖的经纬度
       var lng = 120.141375;
       var lat = 30.257806;
       toDoFunction(lng, lat);//将经纬度传入到要运用的函数中
      }

     });
     //定位发生错误
     wx.error(function () {
     //下面两行是默认定位到西湖的经纬度
      var lng = 120.141375;
      var lat = 30.257806;
      toDoFunction(lng, lat);//将经纬度传入到要运用的函数中
     });

    });
   }
  });
 }

以上代码,如果可以定位到就用定位到的真正的经纬度,再转换成百度地图对应的经纬度,如果定位失败或者是点击取消或者发生错误,则默认定位到西湖的经纬度。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js中的布尔运算符使用介绍
Nov 20 Javascript
用Javascript获取页面元素的具体位置
Dec 09 Javascript
原生js和jquery中有关透明度设置的相关问题
Jan 08 Javascript
javascript省市级联功能实现方法实例详解
Oct 20 Javascript
javaScript实现可缩放的显示区效果代码
Oct 26 Javascript
jQuery解决$符号命名冲突
Jun 18 Javascript
卸载安装Node.js与npm过程详解
Aug 15 Javascript
JS+canvas动态绘制饼图的方法示例
Sep 12 Javascript
js实现无缝滚动双图切换效果
Jul 09 Javascript
JavaScript中作用域链的概念及用途讲解
Aug 06 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
Sep 21 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
jQuery中的select操作详解
Nov 29 #Javascript
微信小程序加载更多 点击查看更多
Nov 29 #Javascript
AngularJs表单验证实例代码解析
Nov 29 #Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
Nov 29 #Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
Nov 29 #Javascript
JavaScript获取服务器端时间的方法
Nov 29 #Javascript
微信小程序链接传参并跳转新页面
Nov 29 #Javascript
You might like
Terran历史背景
2020/03/14 星际争霸
php中利用explode函数分割字符串到数组
2014/02/08 PHP
thinkphp浏览历史功能实现方法
2014/10/29 PHP
phpMyAdmin通过密码漏洞留后门文件
2018/11/20 PHP
判断JavaScript对象是否可用的最正确方法分析
2008/10/03 Javascript
JQuery扩展插件Validate—4设置错误提示的样式
2011/09/05 Javascript
Jquery 例外被抛出且未被接住原因介绍
2013/09/04 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
2013/11/28 Javascript
JavaScript中逗号运算符介绍及使用示例
2015/03/13 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
2015/08/21 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
2016/08/30 Javascript
jQuery zTree树插件简单使用教程
2017/01/10 Javascript
基于iScroll实现下拉刷新和上滑加载效果
2017/07/18 Javascript
vue使用keep-alive实现数据缓存不刷新
2017/10/21 Javascript
AJAX在JQuery中的应用详解
2019/01/30 jQuery
深入理解Node内建模块和对象
2019/03/12 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
2019/09/16 Javascript
javascript随机变色实例代码
2019/10/15 Javascript
vue 手机物理监听键+退出提示代码
2020/09/09 Javascript
[01:05:07]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第一场2月1日
2021/03/11 DOTA
python使用Berkeley DB数据库实例
2014/09/26 Python
Python编程入门的一些基本知识
2015/05/13 Python
python列出目录下指定文件与子目录的方法
2015/07/03 Python
Python MySQL数据库连接池组件pymysqlpool详解
2017/07/07 Python
Django与JS交互的示例代码
2017/08/23 Python
python 中字典嵌套列表的方法
2018/07/03 Python
CentOS下Python3的安装及创建虚拟环境的方法
2018/11/28 Python
python获取点击的坐标画图形的方法
2019/07/09 Python
python画图常规设置方式
2020/03/05 Python
TripAdvisor斯洛伐克:阅读评论、比较价格和酒店预订
2018/04/25 全球购物
自动化专业本科毕业生求职信
2013/10/20 职场文书
财务部出纳岗位职责
2013/12/22 职场文书
烹调加工管理制度
2014/02/04 职场文书
卫生院艾滋病宣传活动小结
2014/07/09 职场文书
国庆横幅标语
2014/10/08 职场文书
用python实现监控视频人数统计
2021/05/21 Python