百度地图api参考(2)--实时路况

semjinghua

2013-09-27

问题：刚接触百度地图，实时路况不懂。

解决办法：参考百度地图api，下面是自己写的一个小例子。

百度地图api参考(2)--实时路况

/**
	3d地图处理
	其中包括地图的系列操作：放、缩小、平移、搜索、定位
*/
window.onload = init;
var bdMap = null;
var city = {};
var hasRTT = false;//是否有实时路况
var rttCtrl = null;
function init(){
	try{
		// initData();
		var bdMap = new BMap.Map("container");
		bdMap.centerAndZoom(new BMap.Point(116.404, 39.915), 15);
		
		bdMap.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
		bdMap.addControl(new BMap.ScaleControl());	// 添加默认比例尺控件
		bdMap.enableScrollWheelZoom( true );
		rttCtrl = new BMapLib.TrafficControl();
		bdMap.addControl(rttCtrl);
	}catch( e ){}
}
/**
	打开或关闭实时路况
*/
function openOrCloseRTT(){
	if( hasRTT ){// 没有实时路况
		rttCtrl.hideTraffic();
	}else{
		rttCtrl.showTraffic({predictDate:{hour:15, weekday: 5}});
	}
	hasRTT = !hasRTT;
}

<!DOCTYPE html>
<!-- saved from url=(0014)about:internet -->
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
		
		<title>百度地图的Hello, World</title>
	</head>
<body>
	<div id="container"></div>
	<div id="info_div">
		<label id="city_name"></label>
	</div>
	<div id="ctrl_div">
		<input type="button" value="三维地图" onclick="openOrCloseRs3DMap()"/>
		<input type="button" value="实时路况" alt="畅通（绿），拥堵（红），一般（黄）" onclick="openOrCloseRTT()"/>
	</div>
</body>
<link href="css/3dmap.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/TrafficControl_min.js"></script>
<script type="text/javascript" src="js/3dmap.js"></script>
</html>

body, html,#container {
	width: 100%;
	height: 100%;
	overflow: hidden;
	margin:0;
	z-index:  0;
}
#ctrl_div {
	z-index: 100;
	position: absolute;
	right: 100px;
	top: 20px;
}
 #info_div {
	z-index: 100;
	position: absolute;
	left: 100px;
	top: 20px;
	height: 20px;
	border: 1px solid gray; 
	display: table;
	cursor : pointor;
	background-color: gray;
	color: white;
 }

实时路况百度路况地图api