Ng-Maps 更改方向渲染器的路线颜色

Question

我正在尝试将蓝色路线更改为任何其他颜色，但无法更改。

笨蛋 url: http://plnkr.co/edit/3ddUOUx7r91LJQqKP43e?p=preview

angular.module('ngMap').run(function($rootScope, NgMap) {
        $rootScope.logLatLng = function(e) {
          console.log('loc', e.latLng);
        }

        NgMap.getMap({id: 'locomotiveMap'}).then(function(map) {

              var directionsDisplay = new google.maps.DirectionsRenderer;
              var polyline = new google.maps.Polyline({
              strokeColor: '#FF0000',
              strokeOpacity: 0.7,
              strokeWeight: 1
              });

              directionsDisplay.setOptions({polylineOptions: polyline});
              directionsDisplay.setMap(map);

              console.log(directionsDisplay);

        });

        $rootScope.wayPoints = [
          { location: { lat: 51.546550, lng: 0.026345 }, stopover: true }, 
          { location: { lat: 51.5429188223739, lng: 0.034160614013671875 }, stopover: true },
          { location: { lat: 51.5493953, lng: 0.0412878 }, stopover: true }
        ];
      });

HTML:

<body ng-app="ngMap">
    <div style="width: 100%; float:left; height: 100%">

      <ng-map id="locomotiveMap" zoom="14" style="height:90%">
        <marker animation="Animation.DROP" position="51.546550, 0.026345" ></marker>

        <marker animation="Animation.DROP" position="51.5493953, 0.0412878"></marker>
        <directions 
          draggable="true"
          waypoints="{{wayPoints}}"
          suppress-markers="true"
          origin="51.546550, 0.026345"
          destination="51.5493953, 0.0412878"
          >
        </directions>

      </ng-map> 

    </div>

  </body>

Answer 1

指定线条的颜色polylineOptions property of DirectionsRendererOptions struct是有意的。

如果是 ng-map 库，可以通过 directions 指令的 polyline-options 属性指定：

<directions polyline-options='{strokeColor: "red"}' draggable="true" waypoints="{{wayPoints}}" suppress-markers="true" origin="51.546550, 0.026345" destination="51.5493953, 0.0412878"></directions>

例子

angular.module('ngMap').run(function ($rootScope, NgMap) {
    $rootScope.logLatLng = function (e) {
        console.log('loc', e.latLng);
    }

    initMapDetails();

    $rootScope.wayPoints = [
        { location: { lat: 51.546550, lng: 0.026345 }, stopover: true },
        { location: { lat: 51.5429188223739, lng: 0.034160614013671875 }, stopover: true },
        { location: { lat: 51.5493953, lng: 0.0412878 }, stopover: true }
    ];


    function initMapDetails() {
        NgMap.getMap({ id: 'locomotiveMap' }).then(function (map) {
            google.maps.event.addListener(map, "tilesloaded", function () {
                
            });
        });
    }
});

<script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<div ng-app="ngMap" style="width: 100%; float:left; height: 100%">
    <ng-map id="locomotiveMap" zoom="14" style="height:90%">
      <marker animation="Animation.DROP" position="51.546550, 0.026345"></marker>

      <marker animation="Animation.DROP" position="51.5493953, 0.0412878"></marker>
      <directions polyline-options='{strokeColor: "red"}' draggable="true" waypoints="{{wayPoints}}" suppress-markers="true" origin="51.546550, 0.026345" destination="51.5493953, 0.0412878">
      </directions>

    </ng-map>
</div>

Updated plunker

Ng-Maps 更改方向渲染器的路线颜色

Ng-Maps change route color of direction renderer

angularjs

ng-map