create a line between markers using ngmap

问题

I am using ngmap and angular js to show a set of markers in a map without problem. I need paint a line that join these markers.

My code:

In view:

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

in my controller:

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}];
});

回答1:

For that purpose you could utilize shape directive, for example:

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

where path property is initialized from markers like this:

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

Working example

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

回答2:

For those who are looking to show driving directions between markers and customize the appearance of the line between each marker:

Working Example:

In your controller:

$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: Pass an object of the form:

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

into the options attribute of the <directions> element

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

来源：https://stackoverflow.com/questions/33505484/create-a-line-between-markers-using-ngmap

标签

javascript

angularjs

ng-map