Angular-Google-карты Полилинии Путь - PullRequest
Новая
       51

Angular-Google-карты Полилинии Путь

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

Я пытаюсь нарисовать простую ломаную линию между двумя маркерами, используя Angular-google-maps.У меня есть две позиции маркеров, но когда я хочу создать ломаную линию между ними, все становится немного сложнее.

Может быть, моя логика нехороша.Я пытаюсь в первый раз запасать в переменной позиции каждого маркера, и я помещаю его в массив.Затем я пытаюсь преобразовать это в объект google.maps.LatLng ().Но этот объект всегда пуст, и у меня есть что-то вроде этого в моей консоли: 

_.L lat:ƒ() lng:ƒ() __proto__: Object

Вот моя функция: 

  function drawline (position){
  if (position.latitude === '' || position.longitude === '' ) return;
      var emitterName = position.username;

      if (emitterName == "emitter-python") {
      var coor = [position.latitude, position.longitude];
      var lineCoordinates = new google.maps.LatLng({latitude: coor[0],longitude: coor[1]});
      console.log("coor:", coor); //Print [5,5]
    }else {
        console.log("not emitter1");
      }

      if (emitterName == "emitter-python2") {
        var coor1 = [position.latitude, position.longitude];
        var lineCoordinates1 = new google.maps.LatLng({latitude: coor1[0],longitude: coor1[1]});
        console.log("coor1:", coor1); //Print [5,6]
      }else{
        console.log("not emitter2");
      }

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

1 Ответ

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

Относительно

Затем я пытаюсь преобразовать это в объект google.maps.LatLng ().Но этот объект всегда пуст, и у меня есть что-то подобное в моей консоли 

_.L lat:ƒ() lng:ƒ() __proto__: Object

на самом деле это не пусто , чтобы вывести фактические значения (lat и lng) в консоли вы можете использовать один из предоставленных методов google.maps.LatLng класса , например toString(): 

console.log(latLng.toString())

Я думаю, выиспользуя agularjs-google-maps библиотеку , если это так, то для рисования многоугольника 

<shape name="polygon" 
     paths="{{triangleCoordsAlt}}"
     stroke-color="#FF0000"
     stroke-opacity="0.8"
     stroke-weight="2"
     fill-color="#FF0000"
     fill-opacity="0.35">
   </shape>

данные могут быть указаны в следующем формате: 

 $scope.triangleCoords = [
      {lat: 25.774, lng: -80.190},
      {lat: 18.466, lng: -66.118},
      {lat: 32.321, lng: -64.757},
      {lat: 25.774, lng: -80.190}
];

или 

$scope.triangleCoordsAlt = [
      [25.774, -80.190],
      [18.466,-66.118],
      [32.321, -64.757],
      [25.774, -80.190]
];

Вот демонстрационная версия , которая демонстрирует, как рисовать многоугольник

...