最近遇到几个文字位置无法直接在导航软件查找定位的事情,很郁闷,就在想现在二维码时代了,居然还不能扫码实现导航吗?
于是用各导航软件研究了一下,发现导航软件是可以扫码导航的,但是只能针对他自己的链接有用,不像在微信打开别人发送的位置点导航时可以选择你已经安装的导航软件来导航。但是我最终是想实现微信发送位置那种导航引导界面,因此这个方案不适合推广。
而微信发送的位置信息呢,有人说用电脑版微信打开别人发的位置,复制链接生成二维码就行,但是我看来看去,总感觉哪里不对,因为微信电脑板打开别人发送定位的话,界面和直接在微信里面点开完全不一样,将那个链接生成二维码,扫码后打开的界面根本就没有了位置信息
又有人说,在腾讯地图分享位置再转二维码,试了下在微信中扫码,的确可以打开腾讯地图界面指向正确地点,但是点击导航就变成了要用腾讯地图 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 & "×tamp=" & 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!