扫码打开微信位置信息界面、微信定位(发送位置)生成二维码解决方案

14 篇文章 0 订阅
5 篇文章 0 订阅

 最近遇到几个文字位置无法直接在导航软件查找定位的事情,很郁闷,就在想现在二维码时代了,居然还不能扫码实现导航吗?

于是用各导航软件研究了一下,发现导航软件是可以扫码导航的,但是只能针对他自己的链接有用,不像在微信打开别人发送的位置点导航时可以选择你已经安装的导航软件来导航。但是我最终是想实现微信发送位置那种导航引导界面,因此这个方案不适合推广。

而微信发送的位置信息呢,有人说用电脑版微信打开别人发的位置,复制链接生成二维码就行,但是我看来看去,总感觉哪里不对,因为微信电脑板打开别人发送定位的话,界面和直接在微信里面点开完全不一样,将那个链接生成二维码,扫码后打开的界面根本就没有了位置信息

又有人说,在腾讯地图分享位置再转二维码,试了下在微信中扫码,的确可以打开腾讯地图界面指向正确地点,但是点击导航就变成了要用腾讯地图 APP 来进行导航,这又回到了前面说的各自导航软件分享自己链接那种方式了,依然用不成:

真正可用的微信扫码导航二维码制作流程:

1、要有自己域名的网站空间。

2、申请微信公众号

3、搞定微信公众号的 Atk 、Jtk 令牌获取,设置微信公众平台 js 安全域名、IP 白名单等。

4、搞定微信定位授权 URL 鉴权计算页面。我是用 ASP 写的:

<% Response.Charset="UTF-8" %>
<!--#include file="./inc/NoSQL.Asp" -->
<!--#include file="./inc/sha1.asp"-->
......略
<%
	response.contentType="application/json"	
	Response.AddHeader "Access-Control-Allow-Headers","x-requested-with,content-type"
......略
loadurl=deURIC(Request.QueryString("url"))

......略

			timestamp=ToUnixTime(now, 8)
			noncestr=createNonceStr(16)
			appId=(RS.Fields("AppID").Value)
			jsapi_ticket=(RS.Fields("jsapi_ticket").Value)
			'----
			sha1Str="jsapi_ticket=" & jsapi_ticket & "&noncestr=" & noncestr & "&timestamp=" & timestamp & "&url=" & loadurl & ""
			signature=Sha1(sha1Str)
			'----
			outjson="{" & _
					d & "err" & d & ":" & "" & "0" & "" & "," & _
					d & "appId" & d & ":" & d & appId & d & "," & _
					d & "noncestr" & d & ":" & d & noncestr & d & "," & _
					d & "timestamp" & d & ":" & "" & timestamp & "" & "," & _				
					d & "signature" & d & ":" & d & signature & d & "" & _
					"}"
			Response.Write outjson

%>

5、在定位页面调用微信定位接口 getlaton() ,鉴权先,之后点击设定的链接 navig() 即可打开微信位置信息页面:

		<script src="../js/jquery-1.8.2.min.js" type="text/javascript"></script>
		<script src="../js/wgsgcjbd.js?v=3" type="text/javascript"></script>
		<script type='text/javascript' src='http://res.wx.qq.com/open/js/jweixin-1.6.0.js'></script>

......略

<script type="text/javascript">
	$(function() {
		$(".loading").show();
		sid=getQueryVariable("d")*1;//ID
		longi=getQueryVariable("x")*1;//ID
		lati=getQueryVariable("y")*1;//ID
		if((sid<0)){
			if(!(longi<0||lati<0)){	
				setData(longi,lati,locn);
				getlaton();
			}else{
				$('#waitx').hide();
			}
		}else{
			longi=locx[sid].lon;//经度
			lati=locx[sid].lat;//纬度
			locn=locx[sid].n;
			setData(longi,lati,locn);
			getlaton();
		}
	});
	function setData(lon,lat) {
		var htmltxt='';		
		$(".loading").show();		
		$("#lyjdinfo").empty();
			htmltxt+='<div style="height:0.12rem;"><a href="" onclick="navig(';
			htmltxt+="'"+lati+"','"+longi+"','"+locn+"');";
			htmltxt+='"><span id="latongo">点击导航前往:'+locn+'</span></a><div style="clear: both;"></div></div>';
		$("#lyjdinfo").html(htmltxt);		
	}
	function getlaton(){		
		$.ajax({
			type: "GET",
			url: "../../wx?url=" + encodeURIComponent((location.href)),
			dataType: "json",
			data: {},
			success: function (res) {
				$('#waitx').text('定位授权获取成功!');				
				$(".loading").hide();
				if(res.err==0){
					wx.config({
						debug: false, 
						appId: res.appId,
						timestamp: res.timestamp, 
						nonceStr: res.noncestr, 
						signature: res.signature,
						jsApiList: ['openLocation','getLocation']
					});
					//点击导航
					// var s = window.setTimeout(function(){
					// 				$('#latongo').click();
					// 				//alert('即将跳转打开位置');
					// 			}, 2000);
					wx.error(function (res) {
						var info = "";
						for (var p in res) {
							info += p + ":" + res[p];
						}
						console.log("授权失败:" + info);
					});
					wx.ready(function () {
						wx.getLocation({
							type: 'wgs84',
							success: function (res) {
								lati = res.latitude;
								longi = res.longitude;
							}
						});
					});
				}
			},
			error : function(msg) {
				console.log(msg);
			}
		})
	}	
	function navig(lat,lon,n){
		var p=GPS.wgstogcj(lat*1,lon*1);
		//alert(p.lat+','+p.lon);
		wx.openLocation({
		  latitude: p.lat, 
		  longitude: p.lon, 
		  name: n, // 位置名
		  address: '点击右侧导航前往', // 地址详情说明
		  scale: 15,
		  infoUrl: ''
		});
	}
</script>

中间设置了一堆已经定好位置的点,直接传入 ID 号即可打开,这样是为了便于显示地名。

Over!

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

jessezappy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值