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

我的 "logic" 我陷入了概念，我得到了每个标记的坐标，它给我路径结果：我的第一个标记的坐标和坐标 NULL，以及，NULL 坐标和我的第二个坐标标记。

如果您需要 here，我已经用代码创建了一个 JSFiddle，没有 $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>

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

Angular-google-maps Get markers Coordinates to draw Polyline

javascript

google-maps

angularjs

angular-google-maps