0

ngmap と angular js を使用して、一連のマーカーをマップに問題なく表示しています。これらのマーカーを結ぶ線を描く必要があります。

私のコード:

ビューで：

 <map center="{{markers[0].lat}},{{markers[0].lng}}" zoom="12">
   <marker ng-repeat="pos in markers" position="{{pos.lat}}, {{pos.lng}}"></marker>
</map>

私のコントローラーで：

var app = angular.module('Items', ['ngMap'])

app.controller('CICtrl', function($scope){
    $scope.markers = [{id:1, lat:37.772323, lng: -122.214897}, {id:2, lat:21.291982, lng: -157.821856}, {id:3, lat:-27.46758, lng: 153.027892}];
});

4

2 に答える 2

4

そのために、次shapeのようなディレクティブを利用できます。

<shape name="polyline" path="{{path}}" geodesic="true" stroke-color="#FF0000" stroke-opacity="1.0" stroke-weight="2"></shape>

pathプロパティは次のmarkersように初期化されます。

$scope.path = $scope.markers.map(function(marker){
    return [marker.lat,marker.lng];
});

実施例

var app = angular.module('appMaps', ['ngMap']);
app.controller('mainCtrl', function ($scope) {
    $scope.markers = [{ id: 1, lat: 37.772323, lng: -122.214897 }, { id: 2, lat: 21.291982, lng: -157.821856 }, { id: 3, lat: -27.46758, lng: 153.027892 }];
    $scope.path = $scope.markers.map(function(marker){
        return [marker.lat,marker.lng];
    });
});
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=weather,visualization,panoramio"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<div id="map_canvas" ng-app="appMaps" ng-controller="mainCtrl" >
        <map center="{{markers[0].lat}},{{markers[0].lng}}" zoom="5">
            <marker ng-repeat="pos in markers" position="{{pos.lat}}, {{pos.lng}}"></marker>
            <shape name="polyline" path="{{path}}" geodesic="true" stroke-color="#FF0000" stroke-opacity="1.0" stroke-weight="2">
            </shape>
        </map>
</div>

プランカー

于 2015-11-06T14:30:10.883 に答える
1

マーカー間の運転ルートを表示し、各マーカー間の線の外観をカスタマイズする場合:

作業例:

コントローラーで:

$scope.directions = [
  {
    origin:"Salt Lake City, Utah", 
    destination:"West Valley City, Utah", 
    panelName:"p1",
    renderingOptions: {
      polylineOptions: {
        strokeColor: 'red'
      }      
    },
    wayPoints: [
      {
        location: {lat:40.6812675, lng: -111.9622787},
        stopover: true
      },
      {
        location: {lat:40.6812675, lng: -110.9622787},
        stopover: true
      },
    ]
  },
  {
    origin:"West Valley City, Utah", 
    destination:"West Jordan, Utah", 
    panelName:"p1",
    renderingOptions: {
      polylineOptions: {
        strokeColor: 'blue'
      }      
    },
    wayPoints: [
      {
        location: {lat:40.6812675, lng: -111.9622787},
        stopover: true
      },
      {
        location: {lat:40.6812675, lng: -109.9622787},
        stopover: true
      },
    ]
  },
  {
    origin:"West Jordan, Utah", 
    destination:"Salt Lake City, Utah", 
    panelName:"p2",
    renderingOptions: {
      polylineOptions: {
        strokeColor: 'green'
      }      
    },
    wayPoints: [
      {
        location: {lat:40.6812675, lng: -111.9622787},
        stopover: true
      },
      {
        location: {lat:40.6812675, lng: -108.9622787},
        stopover: true
      },
    ]
  }
];

HTML: 次の形式のオブジェクトを渡します。

renderingOptions: {polylineOptions: {strokeColor: 'red'}}

<directions>要素の options 属性に

          <div style="width: 100%; float:left; height:70%" >     
            <ng-map zoom="3" center="current-location" default-style="false" style="height: 450px; display:block; ">
                <directions ng-repeat="dir in directions"
                  draggable="true"
                  options="{{dir.renderingOptions}}"
                  travel-mode="DRIVING"
                  waypoints="{{dir.wayPoints}}"
                  panel="{{dir.panelName}}"
                  origin="{{dir.origin}}"
                  destination="{{dir.destination}}">
                </directions>            
            </ng-map>
          </div>
于 2016-09-07T16:43:54.400 に答える