如何使用Bing Map API在js中获取流量数据

Question

我需要用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>

Answer 1

以下示例有效，我只做了两处更改：

1-我已经提供了有效的Bing地图密钥（使用应用程序网址：http://stacksnippets.net/js），您可以获得一个表单here。

2-我在loadModule回调和trafficManager.show()之间设置了延迟。

我可以在Chrome控制台中看到，流量API请求未正确发送密钥，将401 (Unauthorized)作为响应。

如下图所示，&key={key}似乎不完整。我想这是一个错误，或者初始化工作流程是错误的。无论延迟如何解决问题。

与延迟发送的请求相反，密钥似乎是正确的。

＆＃13;

＆＃13;

var map = null;

GetMap(43.243718, -79.388785, 11);

function GetMap(latitude, longitude, zoomLevel) {
  map = new Microsoft.Maps.Map(document.getElementById("myMap"), {
    credentials: 'AsI529bayR--zjFnbPx2sl4yGScTrovaNNLsGPR9TxgcrUjFBpoqwKsxYtz9jPnS',
    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: zoomLevel,
    center: new Microsoft.Maps.Location(latitude, longitude)
  })

  Microsoft.Maps.loadModule('Microsoft.Maps.Traffic', {
    callback: function() {
      trafficLayer = new Microsoft.Maps.Traffic.TrafficLayer(map);
      // show the traffic Layer 
      setTimeout(function() {
        trafficLayer.show();
      }, 1000);

    }
  });
}

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);

  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;