网页拉取微信内置地图（openLocation）详细教程轻松实现一键导航

众所周知，我们在网页开发中，如果使用的是第三方地图，分享到微信中会非常不友好，用户只能网页导航或者通过第三方地图导航，如果我们使用的百度地图分享，则用户只能发起百度地图的导航，非常的不方便。

所以，为什么我们不能向给朋友发定位一样，发送一个位置，让用户自行选择使用什么导航软件进行导航呢？

答案是肯定可以的。

因为之前开发过类似项目，我就非常狭隘的认为需要通过腾讯LBS来实现，但是看了一圈LBS文档之后，发现这和我的需求并不一致，所以，看了一下微信公众号的开发文档，找到了答案。

一、微信JS-SDK

在微信公众号开发文档的JS-SDK说明文档中的第8条，就是地理位置，链接为：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#36

如果要设置导航，则使用微信内置地图查看位置接口

wx.openLocation({

latitude: 0, // 纬度，浮点数，范围为90 ~ -90

longitude: 0, // 经度，浮点数，范围为180 ~ -180。

name: '', // 位置名

address: '', // 地址详情说明

scale: 1, // 地图缩放级别,整形值,范围从1~28。默认为最大

infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转

});

如果是想获取用户位置，则使用获取地理位置接口

wx.getLocation({

type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'

success: function (res) {

var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90

var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。

var speed = res.speed; // 速度，以米/每秒计

var accuracy = res.accuracy; // 位置精度

}

});

二、使用方法

和微信分享类似，我们需要经过认证的微信公众号，并提交安全域名，如果不会微信分享，没有操作过的，参考这篇文章：

小白视角：自定义微信分享时的图标、标题以及简介教程

和微信分享不同，我们不能直接通过微信分享的形式来实现地图的调用，比如：

wx.ready(function () { //需在用户可能点击分享按钮前就先调用

wx.updateAppMessageShareData({

title: '万科·翰林建面约93-116㎡VR样板间',

desc: '万科翰林，地处观山大境，紧邻三大立体交通网，地铁在旁快铁环伺优享家门口贵阳一中新世界翡翠公园学校九年公立教育万科翰林...',

link: 'https://720.gyxlck.com/wankehanlin/',

imgUrl: 'https://720.gyxlck.com/wankehanlin/logo.jpg',

success: function () {

// 设置成功

}

});

我们将代码放入后，会发现代码并没有工作，这其实并不奇怪。

因为调取微信内置地图，是需要一个交互过程的，我需要在页面中设置一个按键或者其他形式的交互，绑定按键事件，通过点击来触发。

三、分享代码

代码非常简单，我是参考官方演示Demo精简更改实现的，大家可以根据自己实际开发情况进行适当的更改，比如怎么引用开发框架等问题，需要自行考虑。

页面代码

<?php
require_once "jssdk.php";
$jssdk = new JSSDK("yourAppID", "yourAppSecret");
$signPackage = $jssdk->GetSignPackage();
?>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>微信一键导航</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
  <link rel="stylesheet" href="css/style.css">
</head>
<body ontouchstart="">
<div class="wxapi_container">
    <div class="lbox_close wxapi_form">
     
      <h3 id="menu-location">一键导航测试</h3>
      <span class="desc">通过微信内置地图一建导航</span>
      <button class="btn btn_primary" id="openLocation">点击导航</button>
      <span class="desc">测试位置接口</span>
      <button class="btn btn_primary" id="getLocation">获取坐标</button>

</div>
  </div>
</body>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
  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',
        'openLocation',
        'getLocation',
        'updateAppMessageShareData',
        'updateTimelineShareData'
      ]
  });
</script>
<script src="js/zepto.min.js"></script>
<script src="js/demo.js"> </script>
</html>

<?php

require_once "jssdk.php";

$jssdk = new JSSDK("yourAppID", "yourAppSecret");

$signPackage = $jssdk->GetSignPackage();

<!DOCTYPE html>

<html>

<head>

<title>微信一键导航</title>

</head>

<h3 id="menu-location">一键导航测试</h3>

<span class="desc">通过微信内置地图一建导航</span>

<span class="desc">测试位置接口</span>

</div>

</body>

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',

'openLocation',

'getLocation',

'updateAppMessageShareData',

'updateTimelineShareData'

]

});

</script>

</html>

引用了两个JS文件和一个样式文件：点击下载

成品演示地址：点击跳转调用测试页面

其他

大家测试的时候应该也发现了，通过获取地理位置接口并不能获取到准确的位置数据，会产生一定的偏差，那么怎么纠正这个偏差呢？

手动拾取坐标即可，可以通过腾讯LBS官方工具找到准确的经纬度坐标：点击跳转坐标拾取工具

如果在调用过程中有什么不明白的，欢迎和我一起共同探讨交流。

原创文章，作者：蓝洛水深，如若转载，请注明出处：https://blog.lanluo.cn/9711

发表回复

Please Login to Comment

Comments(4)

0930 2021年10月23日下午12:14

大佬, 有个问题想咨询你一下 openLocation 报错, openlocation the permission value is offline verifying 有遇到过吗? 在ios端会有

回复
- 蓝洛水深 2021年10月25日上午9:08
  
  您好。这个问题需要先排除两个问题，1、是否是本地调试接口，其他接口是否有问题；2、如果是服务器调试，服务器和腾讯的通信情况如何；3、引用的JS是否都是https。可以加我QQ7633100一起探讨。
  
  回复
8290 2021年9月8日上午11:53

下载不了

回复
- 蓝洛水深 2021年9月29日下午12:01
  
  已经调整，稍后访问即可。
  
  回复

网页拉取微信内置地图（openLocation）详细教程 轻松实现一键导航