【微信开发】-JSSDK获取地理位置坐标及转换成百度坐标和腾讯坐标

最新推荐文章于 2024-08-20 15:32:18 发布

zyytaiyame

最新推荐文章于 2024-08-20 15:32:18 发布

阅读量3.2w

点赞数 8

文章标签：百度地图高德地图编辑器腾讯百度

本文链接：https://blog.csdn.net/zyytaiyame/article/details/52672289

版权

本文介绍了如何使用微信JSSDK获取GPS坐标并转换为腾讯地图和百度地图坐标。微信的wx.getLocation返回的WGS84坐标在调用第三方地图时会有偏差，因此需要进行坐标转换。文中详细讲解了转换过程，并提供了测试说明。

摘要由CSDN通过智能技术生成

这里是用JSSDK获取地理位置坐标，然后调用腾讯地图或百度地图时，会发现位置有偏差，JSSDK中通过wx.getLocation获得是GPS坐标，需要转换成百度坐标或腾讯坐标（高德地图目前没有学习），一般都是调用百度坐标，但JSSDK中的wx.openLocation是直接调用腾讯地图，所以也一起研究一下，原理都一样，这里面会涉及到JSSDK的配置参数和一些WEUI样式库，这里就不过多说明了，具体参见相关文章，以后我再补充。
一、最基本的JSSDK的获取地理位置接口和使用微信内置地图查看位置接口

<?php
//以下是标准的JSSDK的票证
require_once "jssdk_test.php";
$jssdk = new JSSDK("AppID", "AppSecret");
$signPackage = $jssdk->getSignPackage();
?>
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title></title>
<link rel="stylesheet" href="weui/weui.min.css"/><!--这是WEUI样式库文件自行官网下载使用-->
<link rel="stylesheet" href="weui/example.css" /><!--这是WEUI样式库文件自行官网下载使用-->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script><!--调用jQuery-->
</head>
<body>
   <div class="bd">
      <div class="weui_cells">
      <div class="weui_cell_bd weui_cell_primary">
                   <span id="locationText"></span>
      </div>
      <div class="weui_cell">
                  <button class="weui_btn weui_btn_primary" id="getLocationId">getLocation</button>
      </div>
              <div class="weui_cell">
                  <button class="weui_btn weui_btn_primary" id="openLocationId">openLocation</button>
            </div>
 </div>
   </div>
</body>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script><!--调用JSSDK-->
<script> 
  //JSSDK配置参数 通过config接口注入权限验证配置
  wx.config({
      debug: false,
      appId: '<?php echo $signPackage["appId"];?>',
      timestamp: <?php echo $signPackage["timestamp"];?>,
      nonceStr: '<?php echo $signPackage["nonceStr"];?>',
      signature: '<?php echo $signPackage["signature"];?>',
      jsApiList: [
        'checkJsApi',
        'onMenuShareTimeline',
        'onMenuShareAppMessage',
        'onMenuShareQQ',
        'onMenuShareWeibo',
        'hideMenuItems',
        'showMenuItems',
        'hideAllNonBaseMenuItem',
        'showAllNonBaseMenuItem',
        'translateVoice',
        'startRecord',
        'stopRecord',
        'onRecordEnd',
        'playVoice',
        'pauseVoice',
        'stopVoice',
        'uploadVoice',
        'downloadVoice',
        'chooseImage',
        'previewImage',
        'uploadImage',
        'downloadImage',
        'getNetworkType',
        'openLocation',
        'getLocation',
        'hideOptionMenu',
        'showOptionMenu',
        'closeWindow',
        'scanQRCode',
        'chooseWXPay',
        'openProductSpecificView',
        'addCard',
        'chooseCard',
        'openCard'
      ]
  });
</script>
<script> 
  //通过ready接口处理成功验证，加载直接调用的程序放在ready中，这里目前为空
  wx.ready(function () {
    

  });

  //这块是用jQuery来把wx.getLocation获取到的值显示在页面中的id=LocationText的位置
  document.querySelector('#getLocationId').onclick = function ()<