webGIS线路换乘的实现方法

笛途 发布于 2014/12/01 09:19
阅读 148
收藏 1

当在百度上搜索出行线路时,系统会给出好几种公交换乘方案,同时在地图上显示出大致的线路图。那这条线路是怎么画出来的呢?为什么会沿着底图上的路段走,而不会乱掉呢?其实实现起来很简单。

示例图:


实现代码:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://101.95.48.9:8088/api/map.js?key=您的密钥"></script>
<title>公交</title>
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
</style>

</head>

<body>

<div id="div_map" style="width:100%;height:100%;"></div>

<script type="text/javascript">

var map=null; 
map=new STMapObj("div_map"); 
map.locateMap(new STMapPoint(121.43745399,31.171535),6); 
map.setZoomCompVisible(false); 
map.setScaleCompVisible(false); 

bus();
//公交查询
function bus()
{
var Bus = new STMapBusTrans();
Bus.sp=new STMapPoint(121.429802,31.161201); //起点 STMapPoint 类型
Bus.ep=new STMapPoint(121.429802,31.161201); //终点 STMapPoint 类型
Bus.status=1; //坐标类型
Bus.tactic=1; //公交策略
Bus.count=1; //数目
Bus.cbkFunction = function(re) //回调函数 function(result){}
{
var line = re.getResulte(1);
for (var i=0;i<line.xys.length ; i++)
{
var poly = new STMapPolyline();
poly.id="testlinebus"+Math.random(); //【必选】对象id
poly.points=line.xys[i]; //【必选】经纬度坐标串:x1,y1;x2,y2;x3,y3
poly.strokeColor="red"; //【可选】线的颜色
poly.strokeWeight=4 //【可选】宽度
poly.strokeOpacity="0.5" //【可选】透明度
poly.dashStyle = "solid" //【可选】线形,所有可选线形请参考文档
poly.filled=false;//【可选】是否填充
poly.fillColor="#FF9933";//【可选】填充颜色
poly.fillOpacity="0.5";//【可选】填充透明度
poly.autoClose=false; //【可选】是否自动闭合
poly.infowin=true; //【可选】是否点击显示信息窗口,默认为true。
poly.title=""; //设置属性框的标题
poly.content=line.texts[i]; //设置属性框的内容
//添加到地图上
map.addOverlay(poly);
}
}
Bus.execute();
}
</script>
<div style="display: none">
<script type="text/javascript">
var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cspan id='cnzz_stat_icon_1000501913'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s11.cnzz.com/z_stat.php%3Fid%3D1000501913' type='text/javascript'%3E%3C/script%3E"));
</script>
</div>
</body>
</html>

加载中
返回顶部
顶部