Angular-google-maps 获取标记坐标以绘制折线

Question

我正在尝试使用 angular-google-maps (doc here) 用折线绘制一条线。

我对 AngularJS 不是很熟悉，所以我在做我想做的事情时遇到了一些困难。

我可以用这个功能在地图上打印标记：

function addPosition (position, refresh) {
  if (! _.mHas(position, "longitude", "latitude", "username")) {
    console.log("That's not a proper position entry !");
    return;
  }
  if (position.latitude === '' || position.longitude === '' ) return;
  vm.map.markers.push({
    id : vm.map.markers.length,
    coords : {
      longitude : position.longitude,
      latitude : position.latitude
    },
    name : position.username,
    options : {
      icon : 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
      draggable : false
    }
  });

  if (refresh) {
    $timeout(function () {
      vm.map.control.refresh();
    }, 5);
  }
}

我想在我的标记之间绘制一条折线，但我没有很好的逻辑来从我的标记中获取所有坐标并用它们创建一条路径。 我知道我必须做类似的事情：

function userLocation (position){
  var lat = position.latitude;
  var lng = position.longitude;
  var pathLine = [new google.maps.LatLng(lat, lng)];}

然后用这样的东西绘制折线：

$scope.polylines = [{
        path: pathLine,
        stroke: {
            color: '#000000',
            weight: 3
          },
          editable: false,
          draggable: false,
          geodesic: true,
          visible: true,
        }];

由于我的“逻辑”，我陷入了一个概念，我得到每个标记的坐标，它给我的路径结果是：我的第一个标记的坐标和坐标 NULL，以及，NULL 坐标和我的第二个标记的坐标。

如果您需要 here，我已经用代码创建了一个 JSFiddle，没有 $scope.Polyline。

Answer 1

既然你正在使用angular-google-maps library 并且想要

在我的标记之间画一条折线，但我没有很好的逻辑 从我的标记中获取所有坐标并用它们创建路径。

并且假设标记的数据以以下格式表示：

[
   {
       id : vm.map.markers.length,
       coords : {
          longitude : position.longitude,
          latitude : position.latitude
       },
       name : position.username,
       options : {
          icon : 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
          draggable : false
       }
    }
    //...
]

Polyline 的数据可以这样生成：

vm.map.polyline = vm.map.markers.map(m => m.coords);

例子

angular
  .module("mapApp", ["uiGmapgoogle-maps"])
  .controller("mapCtrl", function($scope) {
      vm = this;
    vm.map = {
      center: {
        latitude: -24.9923319,
        longitude: 125.2252427
      },
      zoom: 4,
      lineStyle: {
        color: "#333",
        weight: 5,
        opacity: 0.7
      },


      markers : [
        {
          coords: {
            latitude: -33.8473567,
            longitude: 150.6517955
          },
          name: "Sydney",
          id: 1
        },
        {
          coords: {
            latitude: -37.9716929,
            longitude: 144.772958
          },
          name: "Melbourne",
          id: 3
        },
        {
          coords: {
            latitude: -34.9998826,
            longitude: 138.3309812
          },
          name: "Adelaide",
          id: 4
        },
        {
          coords: {
            latitude: -32.0391738,
            longitude: 115.6813556
          },
          name: "Perth",
          id: 5
        },
        {
          coords: {
            latitude: -12.425724,
            longitude: 130.8632684
          },
          name: "Darwin",
          id: 6
        },
        {
          coords: {
            latitude: -16.8801503,
            longitude: 145.5768602
          },
          name: "Cairns",
          id: 7
        }
      ],

    };

    vm.map.polyline = vm.map.markers.map(m => m.coords);


  });

.angular-google-map-container {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

<script src="https://code.angularjs.org/1.3.14/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="https://rawgit.com/angular-ui/angular-google-maps/2.0.X/dist/angular-google-maps.js"></script>


<div ng-app="mapApp" ng-controller="mapCtrl as vm"> 
        <ui-gmap-google-map 
          center='vm.map.center' 
          zoom='vm.map.zoom'>
          <ui-gmap-markers models="vm.map.markers" coords="'coords'" idkey="'id'" ></ui-gmap-markers>
          <ui-gmap-polyline path="vm.map.polyline" draggable="false" geodesic="true" stroke="vm.map.lineStyle" fit="false"></ui-gmap-polyline>
      </ui-gmap-google-map>
</div>