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

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

答案是肯定可以的。

因为之前开发过类似项目，我就非常狭隘的认为需要通过

一、微信JS-SDK

如果要设置导航，则使用

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

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; // 位置精度

}

});

1

2

3

4

5

6

7

8

9

wx.getLocation({

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

success:function(res){

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

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

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

varaccuracy=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 () {

// 设置成功

}

});

});

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精简更改实现的，大家可以根据自己实际开发情况进行适当的更改，比如怎么引用开发框架等问题，需要自行考虑。

页面代码

require_once "jssdk.php";

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

$signPackage = $jssdk->GetSignPackage();

?>

微信一键导航

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'

]

});

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

require_once"jssdk.php";

$jssdk=newJSSDK("yourAppID","yourAppSecret");

$signPackage=$jssdk->GetSignPackage();

?>

微信一键导航

一键导航测试

通过微信内置地图一建导航

点击导航

测试位置接口

获取坐标