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 相关文章推荐
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
May 07 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
Jun 06 Javascript
Javascript中构造函数要注意的一些坑
Jan 23 Javascript
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
Vue 页面权限控制和登陆验证功能的实例代码
Jun 20 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
Jul 08 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
Sep 03 Javascript
Vue项目打包编译优化方案
Sep 16 Javascript
使用js获取身份证年龄的示例代码
Dec 11 Javascript
javascript实现倒计时关闭广告
Feb 09 Javascript
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
May 30 Javascript
vue实现锚点定位功能
Jun 29 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
php数据库配置文件一般做法分享
2012/07/07 PHP
TNC vs IO BO3 第一场2.13
2021/03/10 DOTA
javascript 对表格的行和列都能加亮显示
2008/12/26 Javascript
jquery绑定原理 简单解析与实现代码分享
2011/09/06 Javascript
网页运行时提示对象不支持abigimage属性或方法
2014/08/10 Javascript
JavaScript字符串对象substr方法入门实例(用于截取字符串)
2014/10/16 Javascript
jQuery遍历DOM节点操作之filter()方法详解
2016/04/14 Javascript
js阻止浏览器默认行为的简单实例
2016/05/15 Javascript
获取input标签的所有属性的方法
2016/06/28 Javascript
用js将long型数据转换成date型或datetime型的实例
2017/07/03 Javascript
最通俗易懂的javascript变量提升详解
2017/08/05 Javascript
Vue组件之自定义事件的功能图解
2018/02/01 Javascript
详解webpack运行Babel教程
2018/06/13 Javascript
vue.extend与vue.component的区别和联系
2018/09/19 Javascript
JS实现的全选、全不选及反选功能【案例】
2019/02/19 Javascript
vue简单练习 桌面时钟的实现代码实例
2019/09/19 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
2019/10/23 Javascript
原生JavaScript实现贪吃蛇游戏
2020/11/04 Javascript
ES2020让代码更优美的运算符 (?.) (??)
2021/01/04 Javascript
零基础写python爬虫之使用urllib2组件抓取网页内容
2014/11/04 Python
详解python时间模块中的datetime模块
2016/01/13 Python
深入浅出分析Python装饰器用法
2017/07/28 Python
python实现简单点对点(p2p)聊天
2017/09/13 Python
浅谈python函数之作用域(python3.5)
2017/10/27 Python
python 实现矩阵上下/左右翻转,转置的示例
2019/01/23 Python
Python3中的f-Strings增强版字符串格式化方法
2020/03/04 Python
什么是python类属性
2020/06/10 Python
SK-II神仙水美国官网:SK-II美国
2020/02/25 全球购物
药剂专业学生求职信范文
2013/12/28 职场文书
廉洁自律演讲稿
2014/05/22 职场文书
酒店总经理岗位职责范本
2014/08/08 职场文书
统计学教授推荐信
2014/09/18 职场文书
党员个人剖析材料
2014/09/30 职场文书
银行授权委托书样本
2014/10/13 职场文书
SpringBoot集成Redis,并自定义对象序列化操作
2021/06/22 Java/Android
HTML中的表单元素介绍
2022/02/28 HTML / CSS