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

Question

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

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

我可以使用此功能在 map 上打印标记:

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 坐标和我的第二个标记的坐标。

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

Answer 1

由于您正在使用 angular-google-maps library想要

to draw a Polyline between my markers but I don't have the good logic to take all coordinates from my markers and create a path with them.

假设标记数据以以下格式表示:

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