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

关于

然后我尝试将其转换为 google.maps.LatLng() 对象。但 这个对象总是空的，我的里面有这样的东西 控制台

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

事实上它不是空的，在控制台打印实际值（lat 和lng）你可以使用one of the provided methods of google.maps.LatLng class，例如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 演示如何绘制多边形