我需要使用Bing地图显示多伦多的交通状况。目的是在网页上选择一条路线后展示该路线的交通状况,且结果应以文本格式呈现。有没有什么方法可以实现这个功能?
以下是我目前已经完成的内容:
以下是我目前已经完成的内容:
var map = null;
GetMap(43.643718, -79.388785, 10);
function GetMap(latitude, longitude, zoomLevel) {
map = new Microsoft.Maps.Map(document.getElementById("myMap"), {
credentials: "Bing code",
zoom: zoomLevel
});
map.setView({
center: new Microsoft.Maps.Location(latitude, longitude)
});
var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), {
draggable: true
});
map.entities.push(pushpin);
// Add a handler to the pushpin drag
Microsoft.Maps.Events.addHandler(pushpin, 'mouseup', DisplayLoc);
map.entities.push(pushpin);
map.setView({
zoom: 10,
center: new Microsoft.Maps.Location(43.643718, -79.388785)
})
Microsoft.Maps.loadModule('Microsoft.Maps.Traffic', {
callback: function() {
trafficLayer = new Microsoft.Maps.Traffic.TrafficLayer(map);
// show the traffic Layer
trafficLayer.show();
}
});
}
function CallGetMap() {
var latitude = parseInt(document.getElementById('txtLatitude').value);
var longitude = parseFloat(document.getElementById('txtLongitude').value);
var zoomLevel = parseFloat(document.getElementById('txtZoomLevel').value);
GetMap(latitude, longitude, zoomLevel);
}
function DisplayLoc(e) {
if (e.targetType == 'pushpin') {
var pinLoc = e.target.getLocation();
alert("The location of the pushpin is now " + pinLoc.latitude + ", " + pinLoc.longitude);
}
}
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<form id="form1" runat="server">
<div style="float:left;">
<span style="margin-right:100px;">Latitude</span>
<span style="margin-right:100px;">Longitude</span>
<span style="margin-right:100px;">Zoom Level</span>
</div>
<div style="clear:both;" />
<div style="float:left;margin-bottom:20px;">
<input id="txtLatitude" type="text" />
<input id="txtLongitude" type="text" />
<input id="txtZoomLevel" type="text" />
<input id="Button1" type="button" value="button" onclick="CallGetMap();" />
</div>
<div style="clear:both;" />
<div id="myMap" style="position:relative; width:2000px; height:2000px;">
</div>
</form>