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，并且没有$ scope.Polyline，我已经用代码创建了一个JSFiddle。

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>

谷歌角地图获取标记坐标以绘制折线

1 个答案: