ng-maps方向选择

Question

地图和即时绘图方向如下：

  <directions
    draggable="false"
    panel="directions-panel"
    travel-mode="DRIVING"
    origin="{{startingPoint}}"
    destination="{{stationDestination}}">
  </directions>

我想在我的地图上显示替代路线，因为现在它只显示一条路线。有谁知道如何去做？所以我可以使用这个ng-map指令显示主路线和至少一个替代方案？

Answer 1

刚刚验证了源代码，似乎angularjs-google-maps目前不支持呈现主路径和备用路由，但您可以考虑以下解决方案：

＆＃13;

＆＃13;

angular.module('ngMap')
  .run(function ($rootScope, NgMap,$timeout) {

    $rootScope.travelMode = "";
    $rootScope.destination = "";
    $rootScope.origin = "";


    NgMap.getMap().then(function (mapInstance) {
      $rootScope.map = mapInstance;
      $rootScope.updateRoutes();
    });



    $rootScope.updateRoutes = function() {
      var directionsService = new google.maps.DirectionsService();
      var request = {
        travelMode: $rootScope.travelMode,
        origin: $rootScope.origin,
        destination: $rootScope.destination,
        provideRouteAlternatives: true
      };

      directionsService.route(request, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
          //$timeout(function () {
            response.routes.forEach(function (route, i) {
              new google.maps.DirectionsRenderer({
                map: $rootScope.map,
                directions: response,
                routeIndex: i
              });
            });
          //});

        }
      });


    };

  });

＆＃13;

html,
    body {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0
    }
    
    body {
      padding: 5px
    }
    
    * {
      box-sizing: border-box;
    }

＆＃13;

<script src="https://maps.google.com/maps/api/js"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>

<div ng-app="ngMap">
  <div style="width: 68%; float:left; height: 100%">
    <b>Origin </b>
    <select ng-model="origin" ng-init="origin='chicago, il'" ng-change="updateRoutes()">
        <option value="chicago, il">Chicago</option>
        <option value="st louis, mo">St Louis</option>
        <option value="joplin, mo">Joplin, MO</option>
        <option value="oklahoma city, ok">Oklahoma City</option>
        <option value="amarillo, tx">Amarillo</option>
        <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
      </select>

    <b>Destionation </b>
    <select ng-model="destination" ng-init="destination='chicago, il'" ng-change="updateRoutes()">
        <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
      </select>

    <b>Mode of Travel: </b>
    <select ng-model="travelMode" ng-init="travelMode='DRIVING'" >
        <option value="DRIVING">Driving</option>
        <option value="WALKING">Walking</option>
        <option value="BICYCLING">Bicycling</option>
        <option value="TRANSIT">Transit</option>
      </select>

    <ng-map zoom="14" center="37.7699298, -122.4469157" style="height:90%" >
      <directions draggable="true" panel="directions-panel" travel-mode="{{travelMode}}" origin="{{origin}}"
        destination="{{destination}}">
      </directions>
    </ng-map>
  </div>


</div>

＆＃13;

＆＃13;

＆＃13;

Plunker