Angular-google-maps Получить маркеры Координаты для рисования полилинии - PullRequest
Новая
       48

Angular-google-maps Получить маркеры Координаты для рисования полилинии

0 голосов
/ 15 октября 2018

Я пытаюсь нарисовать линию с помощью полилинии, используя angular-google-maps (здесь документ) .

Я не очень знаком с 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 и координатами моего второго маркера.

Я создал JSFiddle с кодом, если вам нужно здесь , без $ scope.Polyline.

1 Ответ

0 голосов
/ 20 октября 2018

Поскольку вы используете 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
       }
    }
    //...
]

данные для Полилиния может бытьгенерируется так: 

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