создать линию между маркерами, используя ngmap

Question

создать линию между маркерами, используя ngmap

0

Я использую ngmap и угловые 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}];
});

maikelm 03 нояб. 2015, в 19:18

Источник

Теги:

javascript

angularjs

ng-map

2 ответа

Ещё вопросы

Vadim Gremyachev · Answer 1 · 2015-11-06T13-29-00.000Z

Для этой цели вы можете использовать директиву 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>

Plunker

Jesse Spencer · Answer 2 · 2016-09-07T15-34-00.000Z

Для тех, кто хочет показать маршруты движения между маркерами и настроить внешний вид линии между каждым маркером:

Рабочий пример:

В вашем контроллере:

$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'}}

в атрибут options элемента <directions>

          <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>