使用 Bing Maps API 创建航点

Question

我正在创建一个允许用户将路线保存到数据库的程序 - 但是，这违反了 Bing 地图的条款，因此我允许创建和保存航点。我不太确定如何开始这样做。我以为我知道如何创建航点 - 但它不起作用我正在使用 Visual Studio - VB.NET/ASP.NET。是否建议通过 HTML 或 Visual Basic 将其放入？ HTML 是所有其他 Bing 编码所在的位置。

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
  <script type="text/javascript">
      var map = null;
      var directionsManager;
      var directionsErrorEventObj;
      var directionsUpdatedEventObj;

      function getMap() {
          map = new Microsoft.Maps.Map(document.getElementById('myMap'), { credentials: 'AohjORMDA3Vf0mCtDaEsnVHlza-E9AQMlGa0fKhH-6cvoT09Wjhc2RVzCpKG9HbP' });
      }

      function createDirectionsManager() {
          var displayMessage;
          if (!directionsManager) {
              directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
              displayMessage = 'Directions Module loaded\n';
              displayMessage += 'Directions Manager loaded';
          }
          alert(displayMessage);
          directionsManager.resetDirections();
          directionsErrorEventObj = Microsoft.Maps.Events.addHandler(directionsManager, 'directionsError', function (arg) { alert(arg.message) });
          directionsUpdatedEventObj = Microsoft.Maps.Events.addHandler(directionsManager, 'directionsUpdated', function () { alert('Directions updated') });
      }

      function createDrivingRoute() {
          if (!directionsManager) { createDirectionsManager(); }
          directionsManager.resetDirections();
          // Set Route Mode to driving 
          directionsManager.setRequestOptions({ routeMode: Microsoft.Maps.Directions.RouteMode.driving });
          var startWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: 'Bismarck, ND' });
          directionsManager.addWaypoint(startWaypoint);
          var destinationWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: document.getElementById('hometown').value });
          directionsManager.addWaypoint(destinationWaypoint);
          // Set the element in which the itinerary will be rendered
          directionsManager.setRenderOptions({ itineraryContainer: document.getElementById('directionsItinerary') });
          alert('Calculating directions...');
          directionsManager.calculateDirections();
      }

      function createDirections() {
          if (!directionsManager) {
              Microsoft.Maps.loadModule('Microsoft.Maps.Directions', { callback: createDrivingRoute });
          }
          else {
              createDrivingRoute();
          }
      }
      function hometown_onclick() {

      }

这就是我现在所拥有的。这是我需要为航路点输入的代码 - 当我尝试输入时，方向没有显示：

      function addWaypoint() {
          if (!directionsManager) { createDirectionsManager(); }
          if (directionsManager.getAllWaypoints().length < 2) {
              directionsManager.resetDirections();
              var startWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: 'Bismarck, ND' });
              directionsManager.addWaypoint(startWaypoint);
              var destinationWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: document.getElementById('hometown').value });
              directionsManager.addWaypoint(destinationWaypoint);

          }
          // Insert a waypoint
          directionsManager.addWaypoint(new Microsoft.Maps.Directions.Waypoint({ address: 'Mandan, ND' });
          // Set the element in which the itinerary will be rendered
          directionsManager.setRenderOptions({ itineraryContainer: document.getElementById('directionsItinerary') });
          displayAlert('Calculating directions...');
          directionsManager.calculateDirections();
      }

      if (!directionsManager) {
          Microsoft.Maps.loadModule('Microsoft.Maps.Directions', { callback: addWaypoint });
      }
      else {
          addWaypoint();
      }

让我们从这个问题开始。我该如何解决这个问题？

Answer 1

我找到了答案。加载表单后，航点将自动加载。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol       /mapcontrol.ashx?v=7.0"></script>
  <script type="text/javascript">
  var map = null;
  var directionsManager;
  var directionsErrorEventObj;
  var directionsUpdatedEventObj;

  function getMap() {
      map = new Microsoft.Maps.Map(document.getElementById('myMap'), { credentials: 'AohjORMDA3Vf0mCtDaEsnVHlza-E9AQMlGa0fKhH-6cvoT09Wjhc2RVzCpKG9HbP' });
  }

  function createDirectionsManager() {
      var displayMessage;
      if (!directionsManager) {
          directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
          displayMessage = 'Directions Module loaded\n';
          displayMessage += 'Directions Manager loaded';
      }
      alert(displayMessage);
      directionsManager.resetDirections();
      directionsErrorEventObj = Microsoft.Maps.Events.addHandler(directionsManager, 'directionsError', function (arg) { alert(arg.message) });
      directionsUpdatedEventObj = Microsoft.Maps.Events.addHandler(directionsManager, 'directionsUpdated', function () { alert('Directions updated') });
  }

  function createDrivingRoute() {
      if (!directionsManager) { createDirectionsManager(); }
      directionsManager.resetDirections();
      // Set Route Mode to driving 
      {
          directionsManager.setRequestOptions({ routeMode: Microsoft.Maps.Directions.RouteMode.driving });
          var startWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: '7500 University Dr., Bismarck, ND' });
          directionsManager.addWaypoint(startWaypoint);
          var destinationWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: document.getElementById('hometown').value });
          directionsManager.addWaypoint(destinationWaypoint);
          // Set the element in which the itinerary will be rendered
          directionsManager.setRenderOptions({ itineraryContainer: document.getElementById('directionsItinerary') });
          alert('Calculating directions...');
          directionsManager.calculateDirections();
      }
      // Insert a waypoint
      directionsManager.addWaypoint(new Microsoft.Maps.Directions.Waypoint({ address: 'Bismarck, ND'}), 1);
      // Set the element in which the itinerary will be rendered
      directionsManager.setRenderOptions({ itineraryContainer: document.getElementById('directionsItinerary') });
      alert('Calculating directions...');
      directionsManager.calculateDirections();
  }

  function createDirections() {
      if (!directionsManager) {
          Microsoft.Maps.loadModule('Microsoft.Maps.Directions', { callback: createDrivingRoute });
      }
      else {
          createDrivingRoute();
      }
  }