Angular-google-maps折线路径

Question

我正在尝试使用 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,
        }];
     }

Answer 1

关于

Then I try to transform this in an google.maps.LatLng() object. But this object is always empty and I have something like this in my console
_.L lat:ƒ() lng:ƒ() __proto__: Object

事实上 它不是空的，要在控制台中打印实际值（lat 和 lng），您可以使用 one of the provided methods of google.maps.LatLng class, for example toString()：

console.log(latLng.toString())

我猜你正在使用 agularjs-google-maps library，如果是，那么绘制一个多边形

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

Here is a demo 演示如何绘制多边形

Angular-google-maps折线路径

Angular-google-maps Polyline Path

javascript

google-maps

angularjs

angular-google-maps