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，例如{{3 }}：

console.log(latLng.toString())

我想您正在使用toString()，如果是这样就可以绘制多边形

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

agularjs-google-maps library演示如何绘制多边形

Angular-google-maps折线路径

1 个答案: