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限制文本框为整数和货币的函数代码
Oct 13 Javascript
jQuery中:checked选择器用法实例
Jan 04 Javascript
jquery ajax分页插件的简单实现
Jan 27 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
Mar 28 Javascript
基于BootStrap环境写jQuery tabs插件
Jul 12 Javascript
浅谈node中的exports与module.exports的关系
Aug 01 Javascript
AjaxUpLoad.js实现文件上传
Mar 05 Javascript
vue实现div单选多选功能
Jul 16 Javascript
js实现滑动滑块验证登录
Jul 24 Javascript
详解如何解决使用JSON.stringify时遇到的循环引用问题
Mar 23 Javascript
ztree+ajax实现文件树下载功能
May 18 Javascript
JS的深浅复制详细
Oct 16 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绘图函数实现简单验证码功能的方法
2016/10/18 PHP
PHP正则删除HTML代码中宽高样式的方法
2017/06/12 PHP
使用JS操作页面表格,元素的一些技巧
2007/02/02 Javascript
js 提交和设置表单的值
2008/12/19 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
2014/05/14 Javascript
jQuery Ajax中的事件详细介绍
2015/04/16 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
2015/05/28 Javascript
jquery pagination分页插件使用详解(后台struts2)
2017/01/22 Javascript
Angular2生命周期钩子函数的详细介绍
2017/07/10 Javascript
简述Angular 5 快速入门
2017/11/04 Javascript
js断点调试经验分享
2017/12/08 Javascript
Vue引入sass并配置全局变量的方法
2018/06/27 Javascript
js中Generator函数的深入讲解
2019/04/07 Javascript
layui数据表格跨行自动合并的例子
2019/09/02 Javascript
JavaScript 预解析的4种实现方法解析
2019/09/03 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
2020/04/04 jQuery
微信小程序实现电子签名功能
2020/07/29 Javascript
Python3.x中自定义比较函数
2015/04/24 Python
python利用datetime模块计算时间差
2015/08/04 Python
Djang的model创建的字段和参数详解
2019/07/27 Python
Python实现手机号自动判断男女性别(实例解析)
2019/12/22 Python
opencv resize图片为正方形尺寸的实现方法
2019/12/26 Python
Linux下升级安装python3.8并配置pip及yum的教程
2020/01/02 Python
Python使用正则表达式实现爬虫数据抽取
2020/08/17 Python
python入门教程之基本算术运算符
2020/11/13 Python
python爬虫爬取图片的简单代码
2021/01/18 Python
django inspectdb 操作已有数据库数据的使用步骤
2021/02/07 Python
英国最大的女性服装零售商:Dorothy Perkins
2017/03/30 全球购物
介绍一下SOA和SOA的基本特征
2016/02/24 面试题
影视艺术学院毕业生自荐信
2013/11/13 职场文书
新学期开学寄语
2014/01/18 职场文书
《鸿门宴》教学反思
2014/04/22 职场文书
2014领导干部四风问题查摆思想汇报
2014/09/13 职场文书
2015年试用期工作总结
2014/12/12 职场文书
「海贼王」112.9万粉丝纪念图标公布
2022/03/21 日漫
唤醒紫霞仙子,携手再游三界!大话手游X《大话西游》电影合作专属剧情任务
2022/04/03 其他游戏