新浪微博启动-百度地图应用分享-白红宇

新浪微博启动-百度地图应用分享

阅读量：7095 次

发布时间：2019-06-28

本文共 14655 字，大约阅读时间需要 48 分钟。

<head>

html, body, div, ul {margin:0px; padding:0px; }

header {width:100%; /*height:77px; */background-color:#f9f9f9; border-bottom:1px solid #e4e4e4; border-top:1px solid #f9f9f9; }

header div.lr {margin-left:5%/*15px*/; margin-right:5%/*27px*/; margin-top:16px; display:-webkit-box; width:90%;/*100%;*/}

/*header div.left {float:left;}

header div.right {float:right;}*/

header div.lr div {width:50%; overflow:hidden;}

header div.lr div span:nth-child(odd) {background-p_w_picpath:url(\'assets/linelist_779480ae.png\'); background-size:16px 123px; display:block; width:16px; height:21px; float:left}

header div.lr div span:nth-child(even) {display:block; float:left; font-family:"Microsoft YaHei"; font-size:14px; line-height:14px; color:#333333; margin-left:10px; margin-top:3px; width:70%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

header div.left span:nth-child(odd){background-position: 0px 42px; }

header div.right span:nth-child(odd){background-position: 0px 144px; }

header .title {clear:both; font-family:"Microsoft YaHei"; font-size:13px; line-height:13px; color:#333333; margin-left:15px; margin-top:10px;}

header .summary {clear:both; font-family:"Microsoft YaHei"; font-size:12px; line-height:12px; color:#7e7e7e; margin-left:15px; margin-top:5px; margin-bottom:5px;}

.steps {width:100%; display:block; list-style-type:none; margin:0px; padding:0px;}

.steps li {width:100%; height:58px; border-bottom:1px solid #e4e4e4; display:-webkit-box; -webkit-box-orient:horizontal; margin:0px; padding:0px;}

.steps li div.seq {display:-webkit-box; -webkit-box-pack:center; -webkit-box-align:center; width:33px; height:100%; background-color:#e3f1fa; box-sizing:border-box; }

.steps li div.seq div {background-p_w_picpath:url(\'assets/linelist_779480ae.png\'); background-size:16px 123px; width:15px; height:15px;}

.steps li div.seq div.subway {background-position:0px -17px;}

.steps li div.seq div.bus {background-position:0px -34px;}

.steps li div.instruction {display:-webkit-box; -webkit-box-pack:center; -webkit-box-align:center; margin-left:12px; -webkit-box-pack:start; -webkit-box-flex: 1; height:100%; font-family:"Microsoft YaHei"; color:#7e7e7e; font-size:14px; line-height:20px;}

.steps li div.instruction b {color:#333333;}

.steps li div.arrow {display:-webkit-box; -webkit-box-pack:center; -webkit-box-align:center; width:27px; height:100%; border:none;}

.steps li div.arrow .icon{width:7px; height:12px; background-p_w_picpath:url(\'assets/linelist_779480ae.png\'); background-size:16px 123px; background-position:0 54px; border:none}

footer {width:100%; height:22px; padding-top:10px; background-color:#f9f9f9; text-align:center; font-family:"Microsoft YaHei"; font-size:12px; line-height:12px; font-weight:normal; color:#a2a2a2;}

.ad {width:100%; height:60px; background-color:#424242;}

.ad img {display:block; float:left; margin-left:8px; margin-top:10px;}

.ad .center {float:left; margin-left:7px; margin-top:13px;}

.ad .center h2 {font-family:"Microsoft YaHei"; font-size:15px; line-height:15px; font-weight:bold; color:#ffffff; margin:0px;padding:0px}

.ad .center p {font-family:"Microsoft YaHei"; font-size:11px; line-height:11px; font-weight:normal; color:#d2d1d1; margin:10px 0px 0px 0px;padding:0px}

.ad .download {float:right; width:64px; height:32px; margin-top:10px; margin-right:8px; background-color:#575757; border:1px solid #151515; border-radius:4px; text-align:center; display:-webkit-box; -webkit-box-pack:center; -webkit-box-align:center;}

.ad .download a {font-family:"Microsoft YaHei"; font-size:14px; line-height:14px; font-weight:bold; color:#e5e5e5; margin-top:9px; padding:0px; text-decoration:none;}

.bottom {position:fixed; width:100%; bottom:0px;}

</style>

</head>

<body>

<span>

</span>

</div>

<span>

</span>

<span>地图上选点</span>

</div>

</header>

<footer> 使用百度地图手机客户端，获得更详尽信息</footer>

<h2>打开手机地图</h2>

<p>免费导航、海量优惠、开启智能生活</p>

</div>

</div>

// 公交短链接

//http://j.map.baidu.com/JQk8K；http://j.map.baidu.com/1Z0DK

//http://j.map.baidu.com/6KtjK

// 公交

//http://localhost/webview/branch/webview/src/jump/middle.html?http://map.baidu.com/?newmap=1&s=bt%26c%3D131%26sn%3D1%2524%2524%2524%252412948003%252C4845074%2524%2524%25E6%2588%2591%25E7%259A%2584%25E4%25BD%258D%25E7%25BD%25AE%2524%25240%2524%2524%2524%2524%26en%3D1%2524%2524%2524%252412951544%252C4838011%2524%2524%25E4%25BA%2594%25E9%2581%2593%25E5%258F%25A3%2524%25240%2524%2524%2524%2524&i=0,1,1

//http://localhost/webview/branch/153-2-58/src/jump/middle.html?http://map.baidu.com/?newmap=1&s=bt%26c%3D131%26sn%3D1%2524%2524%2524%252412948001%252C4846751%2524%2524%25E8%25A5%25BF%25E4%25BA%258C%25E6%2597%2597%2524%25240%2524%2524%2524%2524%26en%3D1%2524%2524%2524%252412949592%252C4843783%2524%2524%25E4%25B8%258A%25E5%259C%25B0%2524%25240%2524%2524%2524%2524&i=1,1,1

// online code

var data = location.href.substring(location.href.indexOf(\'?\')+1);//取出原url

var isappinstalled = 0;

// test code

// var data = \'{"from":"","type":"bt","origin":{"name":"我的位置","geo":{"lng":"116.312624","lat":"40.047345"}},"destination":{"name":"五道口","geo":{"lng":"116.344433","lat":"39.998563"}},"region":"131","sn":"1$$$$12948003,4845074$$我的位置$$0$$$$","en":"1$$$$12951544,4838011$$五道口$$0$$$$", "i":"0,0,1", "isappinstalled":1}\';

// var isappinstalled = 0;

// var data = \'{%22from%22:%22PC_SMS%22,%22type%22:%22bt%22,%22origin%22:{%22name%22:%22%E4%B8%8A%E5%9C%B0%22,%22geo%22:{%22lng%22:%22116.326898%22,%22lat%22:%2240.038431%22}},%22destination%22:{%22name%22:%22%E7%9F%A5%E6%98%A5%E8%B7%AF%22,%22geo%22:{%22lng%22:%22116.347613%22,%22lat%22:%2239.982062%22}},%22region%22:%22131%22,%22sn%22:%220$$32612b100e275909110daade$$12949592.000000,4843783.000000$$%E4%B8%8A%E5%9C%B0$$$$$$%22,%22en%22:%220$$c17de10c884d0b59b120a8de$$12951898.000000,4835623.000000$$%E7%9F%A5%E6%98%A5%E8%B7%AF$$$$$$%22,%22i%22:%220,1,1&s=bt%26bttp%3D0%26c%3D131%26sy%3D0%26en%3D0%24%24c17de10c884d0b59b120a8de%24%2412951898.000000%2C4835623.000000%24%24%E7%9F%A5%E6%98%A5%E8%B7%AF%24%24%24%24%24%24%26sn%3D0%24%2432612b100e275909110daade%24%2412949592.000000%2C4843783.000000%24%24%E4%B8%8A%E5%9C%B0%24%24%24%24%24%24%26sq%3D%E7%9F%A5%E6%98%A5%E8%B7%AF%26eq%3D%E4%B8%8A%E5%9C%B0&sc=0&smsf=1%22}\';

// var isappinstalled = 0;

// 处理参数

data = decodeURIComponent(data);

data = JSON.parse(data);

var index = data.i.split(",")[0];

// 设置起点、终点

var span = document.querySelector("header div.left span:nth-child(2)");

span.innerText = data.origin.name;

span = document.querySelector("header div.right span:nth-child(2)");

span.innerText = data.destination.name;

function sendBTReq(){

var script = document.getElementById("__script__");

if(script && script.parentNode){

script.parentNode.removeChild(script);

}

script = document.createElement("script");

script.charset = "utf-8";

script.setAttribute("id", "__script__");

script.setAttribute("type", "text/javascript");

document.body.appendChild(script);

// 下面两行代码是对短信分享过来的路线的起终点做一下处理！

data.sn = data.sn.replace(/^([01])\${2}(\w)+\${2}/gi, "1$$$$$$$$").replace(/\${6}$/gi, "$$$$0$$$$$$$$");

data.en = data.en.replace(/^([01])\${2}(\w)+\${2}/gi, "1$$$$$$$$").replace(/\${6}$/gi, "$$$$0$$$$$$$$");

script.src = "http://map.baidu.com/mobile/?qt=bt&sn=" + data.sn + "&en=" + data.en + "&ie=utf-8&callback=responseBT";

}

function responseBT(obj){

if(obj.result.error){

// error...

console.log("error");

return;

}

// 得到距离和时间信息

var content = index < obj.content.length ? obj.content[index] : obj.content[obj.content.length-1],

// lines里的第一个line作为标准线

targetLines = content.lines[0],

targetStops = content.stops[0],

stopsCount = targetStops.length,

linesCount = stopsCount - 1, line, stop, totalTime = 0, distance;

for(var i = 0; i < (stopsCount-1); i++){

line = targetLines[i];

totalTime += line.time ? line.time : 0;

}

for(var i = 0; i < targetStops.length; i++){

stop = targetStops[i];

totalTime += stop.walk.time ? stop.walk.time : 0;

}

totalTime = Math.round(totalTime / 60);

distance = Math.round(targetLines[linesCount] / 100) / 10;

var div = document.querySelector(".summary");

div.innerText = (totalTime ? "约" + totalTime + "分钟/" : "") + (distance ? distance + "公里" : "") ;

// 得到换成信息

var tempLines = content.lines, arr = [];

for(var i = 0; i < linesCount; i++){

var arr2 = [];

for(var j = 0, jLen = tempLines.length > 3 ? 3 : tempLines.length; j < jLen; j++){

arr2.push(tempLines[j][i]);

}

arr.push(arr2);

}

var transferInfo = "";

for(var i = 0, iLen = arr.length; i < iLen; i++){

for(var j = 0, jLen = arr[i].length; j < jLen; j++){

//transferInfo +=

var str = arr[i][j].name.match(/(^.+)([\(.+])/)[1];

if(transferInfo.indexOf(str) < 0){

transferInfo += (transferInfo.length && transferInfo[transferInfo.length-1] != " ") ? ("/" + str) : str;

}

if(i != (iLen - 1)){

transferInfo += " > ";

}

div = document.querySelector(".title");

div.innerText = transferInfo;

createInstrunction(obj, transferInfo)

}

function createInstrunction(obj, transferInfo){

var content = index < obj.content.length ? obj.content[index] : obj.content[obj.content.length-1],

targetLines = content.lines[0],

targetStops = content.stops[0],

li, info, parent, type;

parent = document.querySelector(".steps");

parent.innerHTML = "";

transferInfos = transferInfo.split(" > ");

var stopsInfos = [], linesInfos = [], allInfos = [];

for(var i = 0, iLen = targetStops.length; i < iLen; i++){

info = "步行" + targetStops[i].walk.distance + "米，到达<b>" + targetStops[i].getOn.name + "站</b>";

type = "walk";

info = \'<div class="seq"><div class="\' + type +\'"></div></div><div class="instruction">\'

+ info + \'</div><div class="arrow"><div class="icon"></div></div>\';

stopsInfos.push(info);

}

for(var i = 0, iLen = (targetStops.length - 1); i < iLen; i++){

var info = transferInfos[i];

if(!info){

return;

}

var temp = info.split("/");

info = "<b>"+temp[0]+"</b>";

if(temp.length != 1){

for(var t = 1, tLen = temp.length; t < tLen; t++){

if(t == 1){

info += "(或";

}

info += temp[t];

if(t == (tLen -1)){

info += ")"

} else {

info += ","

}

if(targetLines[i].type == 0){

type = "bus";

} else if(targetLines[i].type == 1){

type = "subway";

}

info = "乘坐" + info + "，经过" + targetLines[i].station_num + "站，到达<b>" + targetStops[i + 1].getOff.name + "</b>";

if(info) {

li.innerHTML = \'<div class="seq"><div class="\' + type +\'"></div></div><div class="instruction">\'

+ info + \'</div><div class="arrow"><div class="icon"></div></div>\';

parent.appendChild(li);

}

info = \'<div class="seq"><div class="\' + type +\'"></div></div><div class="instruction">\'

+ info + \'</div><div class="arrow"><div class="icon"></div></div>\';

linesInfos.push(info);

}

while(stopsInfos.length){

allInfos.push(stopsInfos.shift());

if(stopsInfos.length){

allInfos.push(linesInfos.shift());

}

for(var i = 0, iLen = allInfos.length; i < iLen; i++){

li = document.createElement("li");

li.innerHTML = allInfos[i];

parent.appendChild(li);

}

sendBTReq();

var ua = navigator.userAgent;

if(ua.indexOf("Android") > 0){

// 如果是android，使用pushservice检查是否安装

//使用pushservice检查是否安装

window.getinfo = function(res) {

if(res.error == 0 && res.package_infos[0].package_name == "com.baidu.BaiduMap") {

var anchor = document.querySelector(".download a");

anchor.href = "bdapp://map/" + "direction?mode=transit&origin="+genPoint(data.origin, true)+"&destination="+genPoint(data.destination, true)+"&region="+data.region;

anchor.innerText = "打开";

} else {

var anchor = document.querySelector(".download a");

anchor.href = "http://shouji.baidu.com/download/map/3052/baidumap_andr_3052.apk";

anchor.innerText = "安装";

}

//window.getinfo({error:0,package_infos:[{package_name: "com.baidu.BaiduMap"}]})

var script = document.createElement(\'script\');

script.src = "http://127.0.0.1:6259/getpackageinfo?callback=getinfo&packagename=com.baidu.BaiduMap";

script.onerror = function(){

var anchor = document.querySelector(".download a");

anchor.href = "http://shouji.baidu.com/download/map/3052/baidumap_andr_3052.apk";

anchor.innerText = "安装";

}

document.head.appendChild(script);

} else { // 若是iPhone iPad

if(isappinstalled){

var anchor = document.querySelector(".download a");

anchor.href = "baidumap://map/" + "direction?mode=transit&origin="+genPoint(data.origin, false)+"&destination="+genPoint(data.destination, false)+"&region="+data.region;;

anchor.innerText = "打开";

} else {

var anchor = document.querySelector(".download a");

anchor.href = "https://itunes.apple.com/cn/app/id452186370?ls=1&mt=8";

anchor.innerText = "使用";//"安装";

}

function genPoint(point, usePair){

// iOS 旧版本不支持 name:xx|latlng:xx,xx 但是pm认为先不管旧版本，如果需要兼容旧版版本，注释掉下面这句。by gyx

// pm又说，先兼容旧版本，等发布两周之后再使用标准的 by gyx

//usePair = true;

if(point.name && point.geo && usePair) {

return "latlng:" + point.geo.lat + "," + point.geo.lng + "|name:" + point.name;

} else {

return point.geo ? (point.geo.lat + "," + point.geo.lng) : point.name;

}

addStat(STAT_MO_SHARE_PV, {"type":"bus"});

</script><script charset="utf-8" id="__script__" type="text/javascript" src="http://map.baidu.com/mobile/?qt=bt&sn=1$$$$12964978,4828118$$我的位置$$0$$$$&en=1$$$$12964854,4826327$$地图上选点$$0$$$$&ie=utf-8&callback=responseBT"></script>

</body>

转载于:https://blog.51cto.com/seared2008/1250136

你可能感兴趣的文章

单节点GI（ASM）+DB 安装以及它对oracle DB自动重启的守护（11g）

查看>>

数池塘