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代码
Jan 01 Javascript
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
Apr 15 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
Nov 06 Javascript
JavaScript自定义日期格式化函数详细解析
Jan 14 Javascript
extjs 如何给column 加上提示
Jul 29 Javascript
微信小程序实现星星评价效果
Nov 02 Javascript
JavaScript继承与聚合实例详解
Jan 22 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
Feb 21 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
Nov 12 Javascript
JavaScript中变量提升机制示例详解
Dec 27 Javascript
vue 动态组件用法示例小结
Mar 06 Javascript
JavaScript如何操作css
Oct 24 Javascript
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
PHP将字符分解为多个字符串的方法
2014/11/22 PHP
PHP Reflection API详解
2015/05/12 PHP
Laravel框架实现简单的学生信息管理平台案例
2019/05/07 PHP
laravel实现前后台路由分离的方法
2019/10/13 PHP
javascript脚本编程解决考试分数统计问题
2008/10/18 Javascript
jQuery点击后一组图片左右滑动的实现代码
2012/08/16 Javascript
JS+CSS实现一个气泡提示框
2013/08/18 Javascript
javascript学习笔记(八)正则表达式
2014/10/08 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
2015/03/26 Javascript
JavaScript制作简易的微信打飞机
2015/03/31 Javascript
javascript封装的sqlite操作类实例
2015/07/17 Javascript
常见的javascript跨域通信方法
2015/12/31 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
2016/01/26 Javascript
javascript实现列表切换效果
2016/05/02 Javascript
如何用js实现鼠标向上滚动时浮动导航
2016/07/18 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
2020/06/19 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
2018/07/03 jQuery
利用不到200行代码写一款属于你自己的js类库
2019/07/08 Javascript
javascript刷新父页面方法汇总详解
2019/10/10 Javascript
细述Javascript的加法运算符的具体使用
2019/10/18 Javascript
Vue中使用better-scroll实现轮播图组件
2020/03/07 Javascript
react 不用插件实现数字滚动的效果示例
2020/04/14 Javascript
一篇超完整的Vue新手入门指导教程
2020/11/18 Vue.js
python分析nignx访问日志脚本分享
2015/02/26 Python
整理Python 常用string函数(收藏)
2016/05/30 Python
pygame游戏之旅 创建游戏窗口界面
2018/11/20 Python
Python 复平面绘图实例
2019/11/21 Python
推荐10个HTML5响应式框架
2016/02/25 HTML / CSS
介绍一下HDLC(High-Level Data Link Control)高层数据链路协议
2012/01/21 面试题
生产经理的自我评价分享
2013/11/07 职场文书
办公室内勤岗位职责范本
2013/12/09 职场文书
中秋节礼品促销方案
2014/02/02 职场文书
2014年党员承诺书范文
2014/05/20 职场文书
部门2014年度工作总结
2014/11/12 职场文书
家庭教育培训学习心得体会
2016/01/14 职场文书
志愿服务心得体会
2016/01/15 职场文书