Bing必应地图中国API - 添加实时交通信息
2011-05-24 14:44:58| 分类： Bing&Google|字号 订阅
2009年4月23日，微软必应地图中国API新增实时路况API。第一时间为大家带来这个API的应用例子。
其实，我们完全可以不用修改任何代码就能查看实时交通路况。因为地图导航工具栏就有“实时路况”这个按钮，点击一下就能看路况信息。
但是，有时候我们希望通过程序来控制是否显示实时路况信息，就有必要参考一下这个例子。秉承一贯的风格，我这个例子也很简单。
首先定义两个函数：显示实时路况ShowTraffic（）及不显示实时路况ClearTraffic（）：
function ShowTraffic() {
map.LoadTraffic(true); //显示实时路况
map.ShowTrafficLegend(x, y); //设置实时路况图例的位置，x、y分别表示距离屏幕坐标左上角的像素位置。如果不设置的话，默认显示在屏幕右下角
map.SetTrafficLegendText("The traffic dude!"); //设置图例的文字说明，不过好像会被默认的文字覆盖掉，我在研究一下。不影响使用
}
function ClearTraffic() {
map.ClearTraffic(); //不显示实时路况
}
然后，我们增加两个按钮来触发这两个函数：
<input id="showtraffic" type="button" value="Show Traffic" onclick="ShowTraffic();"/>
<input id="cleartraffic" type="button" value="Clear Traffic" onclick="ClearTraffic();"/>
大功告成，是不是很简单？
完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://dev.ditu.live.com/mapcontrol/mapcontrol.ashx?v=6.1"></script>
<script type="text/javascript">
var map = null;
function GetMap()
{
map = new VEMap('myMap');
map.LoadMap(new VELatLong(39.9, 116.6), 5);
}
function ShowTraffic() {
map.LoadTraffic(true);
map.ShowTrafficLegend(100, 100);
map.SetTrafficLegendText("The traffic dude!");
}
function ClearTraffic() {
map.ClearTraffic();
}
</script>
</head>
<body onload="GetMap();">
<div id='myMap' style="position:relative; 600px; height:480px;"></div>
<input id="showtraffic" type="button" value="Show Traffic" onclick="ShowTraffic();"/>
<input id="cleartraffic" type="button" value="Clear Traffic" onclick="ClearTraffic();"/>
</body>
</html>
引用：http://www.htchen.com/post/9.html
其实，我们完全可以不用修改任何代码就能查看实时交通路况。因为地图导航工具栏就有“实时路况”这个按钮，点击一下就能看路况信息。
但是，有时候我们希望通过程序来控制是否显示实时路况信息，就有必要参考一下这个例子。秉承一贯的风格，我这个例子也很简单。
首先定义两个函数：显示实时路况ShowTraffic（）及不显示实时路况ClearTraffic（）：
function ShowTraffic() {
map.LoadTraffic(true); //显示实时路况
map.ShowTrafficLegend(x, y); //设置实时路况图例的位置，x、y分别表示距离屏幕坐标左上角的像素位置。如果不设置的话，默认显示在屏幕右下角
map.SetTrafficLegendText("The traffic dude!"); //设置图例的文字说明，不过好像会被默认的文字覆盖掉，我在研究一下。不影响使用
}
function ClearTraffic() {
map.ClearTraffic(); //不显示实时路况
}
然后，我们增加两个按钮来触发这两个函数：
<input id="showtraffic" type="button" value="Show Traffic" onclick="ShowTraffic();"/>
<input id="cleartraffic" type="button" value="Clear Traffic" onclick="ClearTraffic();"/>
大功告成，是不是很简单？
完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://dev.ditu.live.com/mapcontrol/mapcontrol.ashx?v=6.1"></script>
<script type="text/javascript">
var map = null;
function GetMap()
{
map = new VEMap('myMap');
map.LoadMap(new VELatLong(39.9, 116.6), 5);
}
function ShowTraffic() {
map.LoadTraffic(true);
map.ShowTrafficLegend(100, 100);
map.SetTrafficLegendText("The traffic dude!");
}
function ClearTraffic() {
map.ClearTraffic();
}
</script>
</head>
<body onload="GetMap();">
<div id='myMap' style="position:relative; 600px; height:480px;"></div>
<input id="showtraffic" type="button" value="Show Traffic" onclick="ShowTraffic();"/>
<input id="cleartraffic" type="button" value="Clear Traffic" onclick="ClearTraffic();"/>
</body>
</html>
引用：http://www.htchen.com/post/9.html