我这样用微信位置接口openLocation

在微信里发送位置给好友,好友能够很方便快捷的找到自己,非常好用!我们点击好友发过来的位置,可以选择自己手机已安装的导航软件直接导航到目的地。(仅使用IOS系统,安卓本人不了解)

点击好友发来的位置信息,我们进入到微信内置的腾讯地图。

点击上图右下角路标按钮,微信弹出菜单让我们选择导航软件。

微信会自动识别我们手机里面已安装的导航软件,这个功能非常好用。腾讯地图因为是微信自己的地图,即使手机没有该导航软件,也会在这个菜单显示。

我这里选高德地图,微信会唤醒启动高德地图,并且自动把起点终点位置数据准确导入到高德地图,我们确认无误后点击开始导航即可。

最近我在网页设置的一个定位超链接,怎么折腾都无法实现像微信发送位置定位信息这样可供选择导航软件

如上图,点击右下角去这里,没有可供选择本机已安装的导航地图。

而是进入到腾讯导航

如上图,点击导航。由于我手机并没有安装腾讯地图,会提示我打开App Store下载腾讯地图

这就尴尬了!

后来查了些资料,我们的网页要在微信内实现更优质体验,微信告诉我们怎么做了!

通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。

使用微信JS-SDK,微信内置地图查看位置接口openLocation

凡是遇到这些代码的,整个人都不好了!因为我最怕的就是要代码才能实现的功能,折腾这些代码可以累成狗!(问题是不懂)

为了优质的网页体验,累并快乐着去折腾吧!

前几天刚刚折腾好《网页分享到微信显示图标、标题、摘要》

现在趁热打铁,继续搞好微信内置地图接口,不然过一段时间的话激情减退就折腾不下去了!

官方的微信JS-SDK说明文档,使用微信内置地图查看位置接口

<script>
wx.openLocation({
latitude: 0, // 纬度,浮点数,范围为90 ~ -90
longitude: 0, // 经度,浮点数,范围为180 ~ -180。
name: '', // 位置名
address: '', // 地址详情说明
scale: 1, // 地图缩放级别,整形值,范围从1~28。默认为最大
infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
});
</script>

官方文档总是那么的简洁与高效,我就是看不明白如此简洁的文档。所以拼命的找了很多网上的资料参考,并且实践与测试…。只要有时间来耗下去,最后还是搞好了,虽然可能也许有些地方不尽人意。

要具备使用微信JS-SDK的各种配置这里就不说了。直接贴上使用微信内置地图位置接口的代码:

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.4.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: ['onMenuShareTimeline','onMenuShareAppMessage','openLocation']
});

wx.ready(function () {
        //判断当前客户端版本是否支持指定JS接口
	wx.checkJsApi({		
		jsApiList: ['openLocation'], //我只需要查看位置的接口	
			success: function(res) {			
				var obj =JSON.stringify(res);//把微信返回的res数据转换为json字符串
				var jsonobj=eval('('+obj+')');//将json转化为json数据方便获取
				//判断getLocation这个js客户端是否支持,true为支持,false为不支持。
				if (jsonobj.checkResult.getLocation==false) {
					//不支持事件。这里我尝试写入其他js代码,貌似无效的,反正不执行,我不懂因此找不到原因。
				} else {
					//支持事件。
					wx.openLocation({
						latitude: 24.348260, // 纬度,浮点数,范围为90 ~ -90
						longitude: 113.151000, // 经度,浮点数,范围为180 ~ -180。
						name: '石牯塘镇', // 位置名
						address: '广东省英德市', // 地址详情说明
						scale: 12, // 地图缩放级别,整形值,范围从1~28。默认为最大
						infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
					});					
				}
			}
	});	
});
wx.error(function(res){
});
</script>

如上代码,需要注意!仅仅只在需要使用微信内置地图位置接口的页面插入代码。因为如果插入了位置JS接口代码,在微信内置浏览器浏览的话,微信会自动识别JS接口位置信息,跳转到微信内置地图坐标位置!

所以我建立了一个页面模板,只用来做微信位置跳转使用了

只能想到这个方法

这个页面只负责跳转页面,只作为中转页。所以用到以下代码,判断是否是微信内置浏览器

<script type="text/javascript">
//判断是否微信浏览器
function isWeiXin() {

var ua = window.navigator.userAgent.toLowerCase();
console.log(ua);//mozilla/5.0 (iphone; cpu iphone os 9_1 like mac os x) applewebkit/601.1.46 (khtml, like gecko)version/9.0 mobile/13b143 safari/601.1
//判断UA中是否有关键字micromessenger,有的话则是微信内置浏览器
	if (ua.match(/MicroMessenger/i) == 'micromessenger') {
		return true;
		} else {
			return false;
			}
	}
	
	if(isWeiXin()){//是微信浏览器1000毫秒之后跳转至引用该定位页的锚点位置。
		var myTime = setTimeout("Timeout()", 1000);   
			function resetTime() {   
				clearTimeout(myTime);   
				myTime = setTimeout('Timeout()', 1000);   
			}  
			function Timeout() {
				document.location.href='https://www.sgtfz.cn/b*****g-z****c-z**j#wx-dw';
			} 
	} 
	else {//不是微信浏览器直接跳转至已设定坐标的网页地图。
		window.location.href="https://router.map.qq.com/short?l=815c9155e**********6297f9a2f87";
	}
	
</script>

判断是微信内置浏览器,1秒之后跳转至上一页锚点位置

  • 这样做是因为微信在加载这个中转页的时候,检测到JS接口的位置坐标信息,会跳转到内置地图定位坐标。如果中转页不跳转至上一页,在微信内置地图点击返回,就会返回停留在中转页,体验就不太优质了。
  • 如果不设置跳转到锚点位置,跳转后会重新回到页头标题处。例如我们网页内容篇幅很长,而且网页内的定位地图超链接设置在网页内容中间,点击地图定位超链接后,再返回页面如果重新回到页头标题处,就非常不爽啦!

判断不是微信内置浏览器,直接跳转至网页地图。

中转页作用

  • 因为现阶段只能想到用中转页这种方法来实现微信内置地图接口。
  • 在网页放置地图定位超链接超链接直接连接到此中转页,再由中转页判断是否是微信内置浏览器来实现跳转

修改位置坐标信息

1.修改该中转页模板里面微信JS接口位置坐标数据

<script>
wx.openLocation({
    latitude: 24.348260, // 纬度,浮点数,范围为90 ~ -90
    longitude: 113.151000, // 经度,浮点数,范围为180 ~ -180。
    name: '石牯塘镇', // 位置名
    address: '广东省英德市', // 地址详情说明
    scale: 12, // 地图缩放级别,整形值,范围从1~28。默认为最大
    infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
});
</script>

2.修改该中转页模板里面判断为不是微信内置浏览器网页地图坐标数据

<script>
if(isWeiXin()){//是微信浏览器1000毫秒之后跳转至引用该定位页的锚点位置。
    var myTime = setTimeout("Timeout()", 1000);   
    function resetTime() {   
        clearTimeout(myTime);   
        myTime = setTimeout('Timeout()', 1000);   
    }  
    function Timeout() {
        document.location.href='https://www.sgtfz.cn/b*****g-z****c-z**j#wx-dw';
    } 
} 
else {//不是微信浏览器直接跳转至已设定坐标的网页地图。
window.location.href="https://router.map.qq.com/short?l=815c9155e**********6297f9a2f87";
}
</script>

笨方法,只能这么繁琐的啦…。反正又不经常修改,完成任务。

发表评论