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 select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
Dec 19 Javascript
分享Javascript中最常用的55个经典小技巧
Nov 29 Javascript
简介JavaScript中Math.LOG10E属性的使用
Jun 14 Javascript
js实现表单提交后不重新刷新当前页面
Nov 30 Javascript
利用D3.js实现最简单的柱状图示例代码
Dec 09 Javascript
基于JavaScript实现轮播图原理及示例
Apr 10 Javascript
基于Vue实现页面切换左右滑动效果
Jun 29 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
Jun 04 Javascript
vue.js实现插入数值与表达式的方法分析
Jul 06 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
Oct 28 Javascript
解决vue watch数据的方法被调用了两次的问题
Nov 07 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
Nov 17 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
DC漫画《蝙蝠侠和猫女》图透 猫女怀孕老爷当爹
2020/04/09 欧美动漫
PHP实现提取一个图像文件并在浏览器上显示的代码
2012/10/06 PHP
php全排列递归算法代码
2012/10/09 PHP
PHP以及MYSQL日期比较方法
2012/11/29 PHP
PHP函数http_build_query使用详解
2014/08/20 PHP
如何重写Laravel异常处理类详解
2020/12/20 PHP
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
2011/04/27 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
2012/07/20 Javascript
使用原生JS实现弹出层特效
2014/12/22 Javascript
jQuery中[attribute^=value]选择器用法实例
2014/12/31 Javascript
Jquery搜索父元素操作方法
2015/02/10 Javascript
BootStrap入门教程(三)之响应式原理
2016/09/19 Javascript
easyui form validate总是返回false的原因及解决方法
2016/11/07 Javascript
Bootstrap源码解读按钮(5)
2016/12/23 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
2017/06/17 Javascript
ES6中Array.find()和findIndex()函数的用法详解
2017/09/16 Javascript
浅入深出Vue之组件使用
2019/07/11 Javascript
javascript实现京东登录显示隐藏密码
2020/08/02 Javascript
vue实现标签云效果的示例
2020/11/09 Javascript
如何在JavaScript中使用localStorage详情
2021/02/04 Javascript
Python动态加载模块的3种方法
2014/11/22 Python
Python使用minidom读写xml的方法
2015/06/03 Python
python读写ini配置文件方法实例分析
2015/06/30 Python
python批量制作雷达图的实现方法
2016/07/26 Python
CentOS7.3编译安装Python3.6.2的方法
2018/01/22 Python
20行python代码的入门级小游戏的详解
2019/05/05 Python
viagogo英国票务平台:演唱会、体育比赛、戏剧门票
2017/03/24 全球购物
英国索普公园票务和酒店套餐:Thorpe Breaks
2019/09/14 全球购物
十八大报告观后感
2014/01/28 职场文书
中学劳技课教师的自我评价
2014/02/05 职场文书
春季运动会广播稿大全
2014/02/19 职场文书
开学典礼决心书
2014/03/11 职场文书
2014年终个人工作总结
2014/11/07 职场文书
创业计划书之酒厂
2019/10/14 职场文书
POST提交数据常见的四种方式
2022/01/18 HTML / CSS
Tomcat配置访问日志和线程数
2022/05/06 Servers