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

原创

seared2008 2013-07-16 09:48:49 博主文章分类：web ©著作权

©著作权归作者所有：来自51CTO博客作者seared2008的原创作品，请联系作者获取转载授权，否则将追究法律责任

<head>
<title>百度地图</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<style type="text/css">
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>
<script src="addstat.js"></script>
</head>
<body>
<header>
<div class="lr">
<div class="left">
<span>
</span>
<span>我的位置</span>
</div>
<div class="right">
<span>
</span>
<span>地图上选点</span>
</div>
</div>
<div class="title">地铁10号线(内环</div>
<div class="summary">约18分钟/2.6公里</div>
</header>
<ul class="steps"><li><div class="seq"><div class="walk"></div></div><div class="instruction">步行392米，到达<b>呼家楼站</b></div><div class="arrow"><div class="icon"></div></div></li><li><div class="seq"><div class="subway"></div></div><div class="instruction">乘坐<b>地铁10号线(内环</b>，经过2站，到达<b>国贸</b></div><div class="arrow"><div class="icon"></div></div></li><li><div class="seq"><div class="walk"></div></div><div class="instruction">步行615米，到达<b>终点站</b></div><div class="arrow"><div class="icon"></div></div></li></ul>
<div style="width:100%; height:92px;"></div>
<div class="bottom">
<footer> 使用百度地图手机客户端，获得更详尽信息</footer>
<div class="ad">
<img src="assets/icon.png" width="39px" height="39px">
<div class="center" onclick="addStat(STAT_MO_SHARE_OPENNATIVE)">
<h2>打开手机地图</h2>
<p>免费导航、海量优惠、开启智能生活</p>
</div>
<div class="download" onclick="addStat(STAT_MO_SHARE_STEUPNATIVE)">
<a href="https://itunes.apple.com/cn/app/id452186370?ls=1&mt=8">使用</a>
</div>
</div>
</div>
<img id="statImg" src="http://client.map.baidu.com/place/v5/img/transparent_gif?newmap=1&code=share001&type=bus&mobile=iphone&t=60179768" style="display:none">
<script>

// 公交短链接
//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>