共计 4950 个字符，预计需要花费 13 分钟才能阅读完成。
众所周知，我们在网页开发中，如果使用的是第三方地图，分享到微信中会非常不友好，用户只能网页导航或者通过第三方地图导航，如果我们使用的百度地图分享，则用户只能发起百度地图的导航，非常的不方便。
所以，为什么我们不能向给朋友发定位一样，发送一个位置，让用户自行选择使用什么导航软件进行导航呢？
答案是肯定可以的。
因为之前开发过类似项目，我就非常狭隘的认为需要通过 腾讯 LBS来实现，但是看了一圈 LBS 文档之后，发现这和我的需求并不一致，所以，看了一下 微信公众号 的开发文档，找到了答案。
一、微信 JS-SDK
在微信公众号开发文档的 JS-SDK 说明文档中的第 8 条，就是地理位置，链接为：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#36
如果要设置导航，则使用 微信内置地图 查看位置接口
|
1
2
3
4
5
6
7
8
|
wx.openLocation({
latitude: 0, // 纬度，浮点数，范围为 90 ~ -90
longitude: 0, // 经度，浮点数，范围为 180 ~ -180。
name: ”, // 位置名
address: ”, // 地址详情说明
scale: 1, // 地图缩放级别, 整形值, 范围从 1~28。默认为最大
infoUrl: ” // 在查看位置界面底部显示的超链接, 可点击跳转
});
|
如果是想获取用户位置，则使用获取地理位置接口
|
1
2
3
4
5
6
7
8
9
|
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; // 位置精度
}
});
|
二、使用方法
和微信分享类似，我们需要经过认证的微信公众号，并提交安全域名，如果不会微信分享，没有操作过的，参考这篇文章：
小白视角：自定义微信分享时的图标、标题以及简介教程
和微信分享不同，我们不能直接通过微信分享的形式来实现地图的调用，比如：
|
1
2
3
4
5
6
7
8
9
10
11
|
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 精简更改实现的，大家可以根据自己实际开发情况进行适当的更改，比如怎么引用开发框架等问题，需要自行考虑。
页面代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
<?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>
|
引用了两个 JS 文件和一个样式文件：点击下载
成品演示地址：点击跳转调用测试页面
其他
大家测试的时候应该也发现了，通过获取地理位置接口并不能获取到准确的位置数据，会产生一定的偏差，那么怎么纠正这个偏差呢？
手动拾取坐标即可，可以通过腾讯 LBS 官方工具找到准确的经纬度坐标：点击跳转坐标拾取工具
如果在调用过程中有什么不明白的，欢迎和我一起共同探讨交流。
