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 获取页面元素的位置的代码
Sep 25 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
Dec 16 Javascript
原生JS实现拖拽图片效果
Aug 27 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
Mar 23 Javascript
学习JavaScript图片预加载模块
Nov 07 Javascript
jQuery实现根据生日计算年龄 星座 生肖
Nov 23 Javascript
js实现简单的选项卡效果
Feb 23 Javascript
基于Vue单文件组件详解
Sep 15 Javascript
Javascript中的作用域及块级作用域
Dec 08 Javascript
详解vue-cli 接口代理配置
Dec 13 Javascript
如何自动化部署项目?折腾服务器之旅~
Apr 16 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
Oct 22 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备份/还原MySQL数据库的代码
2011/01/06 PHP
php下安装配置fckeditor编辑器的方法
2011/03/02 PHP
解析PHP获取当前网址及域名的实现代码
2013/06/23 PHP
PHP使用PHPexcel导入导出数据的方法
2015/11/14 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
使用PHPWord生成word文档的方法详解
2019/06/06 PHP
PJ Blog修改-禁止复制的代码和方法
2006/10/25 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
2015/05/09 Javascript
js时钟翻牌效果实现代码分享
2020/07/31 Javascript
js获取及修改网页背景色和字体色的方法
2015/12/29 Javascript
完美实现js选项卡切换效果(一)
2017/03/08 Javascript
浅谈vue.js中v-for循环渲染
2017/07/26 Javascript
vue下拉列表功能实例代码
2018/04/08 Javascript
微信小程序实现购物页面左右联动
2019/02/15 Javascript
ES6知识点整理之模块化的应用详解
2019/04/15 Javascript
Python最基本的数据类型以及对元组的介绍
2015/04/14 Python
基于Django的python验证码(实例讲解)
2017/10/23 Python
Python2与python3中 for 循环语句基础与实例分析
2017/11/20 Python
对Python3之进程池与回调函数的实例详解
2019/01/22 Python
使用Python将Mysql的查询数据导出到文件的方法
2019/02/25 Python
pycharm编写spark程序,导入pyspark包的3中实现方法
2019/08/02 Python
Python拆分大型CSV文件代码实例
2019/10/07 Python
Python运行DLL文件的方法
2020/01/17 Python
Python如何执行系统命令
2020/09/23 Python
自定义html标记替换html5新增元素
2008/10/17 HTML / CSS
日本小田急百货官网:Odakyu
2018/07/19 全球购物
C++:局部变量能否和全局变量重名
2014/03/03 面试题
高中生期末评语大全
2014/01/28 职场文书
优秀应届毕业生推荐信
2014/02/18 职场文书
开业主持词
2014/03/21 职场文书
外语系毕业生求职自荐信
2014/04/12 职场文书
关于护士节的演讲稿
2014/05/26 职场文书
信息员培训方案
2014/06/12 职场文书
婚内房产协议书范本
2014/10/02 职场文书
单位证明范文
2015/06/18 职场文书
初中班主任工作随笔
2015/08/15 职场文书