javascript - 如何在js中使用Bing Map API获取路况数据

Question

我需要用 Bing map 显示多伦多的交通状况。目的是当我在网页中选择一条路线时显示交通状况。结果应该是文本格式。有什么办法可以实现吗？

这是我目前所拥有的；

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 map key (带有应用程序 Url:http://stacksnippets.net/js)，您可以获得一个表格 here .

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

我可以在 chrome 控制台中看到，对流量 API 的请求没有正确发送 key ，得到 401 (Unauthorized) 作为响应。

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

与延迟发送的请求相比， key 似乎是正确的。

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

  }
}

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