如何在js中使用Bing地图API获取交通数据

Question

如何在js中使用Bing地图API获取交通数据

3

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

- Darren

“结果应该是文本格式”，您能更好地解释这个要求吗？ - rnrneverdies

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- rnrneverdies · Accepted Answer

以下示例可正常运行，我只做了两个更改：

1- 我放了一个有效的Bing Maps密钥（具有应用程序网址：http://stacksnippets.net/js），您可以从此处获取。

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

我在Chrome控制台中看到，流量API的请求未正确发送密钥，并得到401（未经授权）的响应。如下图所示，&key={key}似乎不完整。我想这是一个错误，或初始化工作流程有误。无论如何，延迟修复此问题。

enter image description here

相对于延迟发送的请求，该密钥似乎是正确的。

enter image description here

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>