ng映射方向备选方案

ng-maps direction alternatives

本文关键字：方案 方向 映射 ng      更新时间：2023-09-26

地图和im绘制方向，如：

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

我也想在地图上显示备选路线，因为现在它只显示一条路线。有人知道怎么做吗？这样我就可以使用这个ng-map指令显示主路线和至少一个备选方案了？

刚刚验证了源代码，angularjs谷歌地图目前似乎不支持主要和替代路线的渲染，但您可以考虑以下解决方案：

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
              });
            });
          //});
        }
      });
    };
  });
html,
    body {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0
    }
    
    body {
      padding: 5px
    }
    
    * {
      box-sizing: border-box;
    }
<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>

Plunker

相关文章：