打开bingmap的官方网站http://www.bing.com/maps/,可以看到地图上方有个Traffic选项,选择了之后就能够看到Traffic的拥堵情况,还能够看到Incident(建筑、修路、事故等等情况),bingmap的API提供了Traffic的接口只能显示Traffic的情况但是不能看到Incidents,经过摸索之后发现,Incidents需要调用bingmap的webservices手动添加,闲话少叙,看看代码就明白了。
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
</head>
<body onload="LoadMap()">
<form id="form1" runat="server">
<div id='myMap' style="position:absolute; top:0px; left:0px; width:100%; height:100%;"></div>
<div id='dicCtrl' style="position:absolute; top:0px; left:350px; width:100%; height:29px; background-color:White; z-index:10000; vertical-align:middle;">
<input id="Button3" type="button" value="Show Traffic" onclick="ShowTraffic()" />
<input id="Button4" type="button" value="Clear Traffic" onclick="ClearTraffic()" />
<input id="Button5" type="button" value="Zoom To New Jersey" onclick="ZoomToNJ()" />
<input id="Button6" type="button" value="Add Traffic Incident" onclick="AddIncident()" />
</div>
</form>
</body>
</html>
<script type="text/javascript">
var MM = Microsoft.Maps;
var map = null;
var _trafficLayer = null;
var _bingMapkey = "AkzZURoD0H2Sle6Nq_DE7pm7F3xOc8S3CjDTGNWkz1EFlJJkcwDKT1KcNcmYVINU";
function LoadMap()
{
map = new Microsoft.Maps.Map(document.getElementById("myMap"), { credentials: _bingMapkey });
}
function ShowTraffic()
{
//The traffic map is only available at zoom levels from 9 through 14, inclusively.
if (this.map.getZoom() < 6)
{
map.setView({ zoom: 6, center: map.getCenter() });
}
if (this.map.getZoom() > 15)
{
map.setView({ zoom: 15, center: map.getCenter() });
}
MM.loadModule('Microsoft.Maps.Traffic', { callback: trafficModuleLoaded });
}
function trafficModuleLoaded()
{
if (_trafficLayer == null)
{
_trafficLayer = new MM.Traffic.TrafficLayer(map);
}
_trafficLayer.show();
}
function ClearTraffic()
{
_trafficLayer.hide();
}
function ZoomToNJ()
{
map.setView({ zoom: 8, center: new MM.Location(40.366316, -74.632212) });
}
function AddIncident()
{
//severity=1,2,3,4&type=1,2,3,4,5,6,7,8,9,10,11&
var locationRect = map.getBounds();
var south = locationRect.getSouth();
var west = locationRect.getWest();
var north = locationRect.getNorth();
var east = locationRect.getEast();
var bbox = south + "," + west + "," + north + "," + east;
var request = "http://dev.virtualearth.net/REST/v1/Traffic/Incidents/" + bbox + "?output=json&jsonp=CallbackFunction&key=" + _bingMapkey;
CallRestService(request);
}
function CallRestService(request)
{
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.setAttribute("src", request);
document.body.appendChild(script);
}
function CallbackFunction(result)
{
//debugger;
if (result && result.resourceSets && result.resourceSets.length > 0 && result.resourceSets[0].resources && result.resourceSets[0].resources.length > 0)
{
var count = result.resourceSets[0].resources.length;
//var listLoc = [];
for (var i = 0; i < count; i++)
{
var resource = result.resourceSets[0].resources[i];
var lat = resource.point.coordinates[0];
var long = resource.point.coordinates[1];
var loc = new MM.Location(lat, long);
var pushpin = new MM.Pushpin(loc, { icon: "Images/Common/warning5.png" });
map.entities.push(pushpin);
//listLoc.push(loc);
}
//var locationRect = new MM.LocationRect(listLoc);
//map.setView({ bounds: locationRect });
}
else
{
alert('No find');
}
}
</script>
效果如图:
如果需要显示bingmap的效果,还需要加入Infobox来显示incident的详细信息。
交通的拥堵情况可以在计算路线的时候应用【directions】,并且可以显示incident信息,但是接口不灵活,效果也并不理想,很难应用到实际,我会在接下来的文章中与各位分享Directions的心得。
分享到:
相关推荐
使用Silverlight Bing Map 加载Google Map,开发环境为vs2010,改程序通过本人测试,可以使用
这是我从微软window phone官网下载下来的,提供的是如何使用bing map的sample实例
可以用于绘制三角图,如矿物,颗粒大小等等等
主要介绍了bing Map 在vue项目中的使用,需要的朋友可以参考下
全面的对GoogleMap和BingMap 的地图API进行分析,如果是做地图开发或做自己的GIS平台,应该是有帮助的
Windows Phone 开发必备 Bing Map 使用方法
NULL 博文链接:https://zhao103804.iteye.com/blog/797428
SilverLight和BingMap做的车辆监控代码
BingMap的demo demo中展示了实例化地图,添加覆盖物(Marker),添加折线,多边形。
用BingControl 实现google 混合地图,如有更好的,请给我留言谢谢.
MMM-Bingmap 基于必应地图的交通地图 需求Bing API创建一个帐户以使用api https://www.bingmapsportal.com/ 使用静态地图制作器来确定大小和位置 https://staticmapmaker.com/bing/ 设定档 { module: 'MMM-Bing...
用silverlight4 +bing 地图 写的一个demo ,与大家共勉。
ArcBruTile display tiles from OpenStreetMap, Bing, Google, SpatialCloud and TMS/WMS-C Services in ArcGIS Desktop.
Silverlight富媒体特效地图实例,使用BingMap地图。
压缩包中包含 BingMaps头文件、 BingMaps.Resources.bundle、 libBingMaps.a 三个文件,导入到开发的项目中,直接可以使用bingMap。
DLL de la bibliothèque Bing Map App SDK de Microsoft pour Silverlight
练习 1: Bing Map 控件介绍 6 任务 1 – 注册一个 Bing Maps 帐号 6 任务 2 – 使用Bing Map 控件 9 练习 2: 处理和定制 Pushpins 26 ...任务 1 – 往地图中添加路线 46 任务 2 – 显示路线行程 56
大家都知道,Cesium通过本身的工具就提供了bing必应地图的加载,但是,需要自己申请key,如果不想那么麻烦申请key,就可以通过下面的代码实现,官方沙箱实例就可以运行啊,需要的下载,有问题联系我
bing地图的开发sdk,用于silverlight 开发bing地图应用