首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

百度mapapi参考(2)-实时路况

2013-10-12 
百度地图api参考(2)--实时路况问题:刚接触百度地图,实时路况不懂。解决办法:参考百度地图api,下面是自己写

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

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

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


百度mapapi参考(2)-实时路况
?
百度mapapi参考(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="百度mapapi参考(2)-实时路况" 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; }

?

热点排行