Angularjs google 地图 API 绘制折线

Question

下面的代码片段给我的输出是（基本上每次点击都会添加一个新标记，我正在获取它的纬度和经度值）：

0: Latitude: 40.207196906764054 Longitude: -99.68994140625
1: Latitude: 40.202477129519124 Longitude: -99.60823059082031

代码片段：

$scope.map.markers.push(marker);
// console.log($scope.map.markers);

for (var item in $scope.map.markers) {
  console.log(item +': '+ "Latitude: " +    $scope.map.markers[item].coords.latitude + " " + "Longitude: " + $scope.map.markers[item].coords.longitude);
}

要绘制折线，我需要以下格式的数组：

var flightPlanCoordinates = [
{lat: 37.772, lng: -122.214},
{lat: 21.291, lng: -157.821},
{lat: -18.142, lng: 178.431},
{lat: -27.467, lng: 153.027}
];

我基本上想沿着这些标记画线。我如何在我的 for 循环中构建这样一个结构来添加这些纬度和经度值，我可以将这些值提供给 Polilines 的 'Path' 变量？

Answer 1

您应该能够遍历标记并将它们的坐标添加到一个空数组中（前提是您显示的 for 循环有效）：

var myCoordinates = [];
for (var item in $scope.map.markers) {
     myCoordinates.push({lat: $scope.map.markers[item].coords.latitude, lng: $scope.map.markers[item].coords.longitude});
}

然后像使用 flightPlanCoordinates 创建折线一样使用 myCoordinates 数组，例如：

var myPolyline = new google.maps.Polyline({
    path: myCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2,
    map: map
});

Angularjs google 地图 API 绘制折线

Angularjs google maps API drawing polyline

google-maps

google-maps-api-3

angularjs

angular-google-maps