使用 Google Map API 绘制航空公司航班地图

Question

我正在尝试使用 Google Map API 绘制航空公司航班地图。但是我在每两点之间生成折线时遇到了一些问题。到目前为止，它只返回前两个点的一条折线。到目前为止我找不到任何错误。最后一个for循环有什么问题吗？任何意见和帮助将不胜感激！

function initMap() {

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 5,
        center: {lat: 41.871314, lng: -99.869580},
        mapTypeId: google.maps.MapTypeId.TERRAIN
      });

    var Lat = [42.365843,37.756066,47.450431,28.431450,38.898793,34.040667];
    var Lng = [-71.009625,-122.440175,-122.308806,-81.308094,-77.037227,-118.289537];

    var lineSymbol = {
         path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
        };

    var Poly = new Array();
        for (var i = 0; i<Lat.length; i++) {
             var pos = new google.maps.LatLng(Lat[i],Lng[i]);
             Poly.push(pos);
        };

    for (var j = 0; j<Poly.length; j++) {   
         if (j%2 == 0){
             var poly = new Array();
             poly = Poly.slice(j,j+2);
             var flowline = new google.maps.Polyline({
                                path: poly,
                                geodesic: true,
                                strokeColor: "#DC143C",
                                strokeOpacity: .8,
                                strokeWeight: 2,
                                icons: [{
                                  icon: lineSymbol,
                                  offset: '100%'
                                }],
                               });
            }
        };

    flowline.setMap(map);
}

Answer 1

您仅设置最后一条折线的

map

属性。这是在创建折线的循环之外：

flowline.setMap(map); 

概念证明小提琴

代码片段：

function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {
      lat: 41.871314,
      lng: -99.869580
    },
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  var Poly = new Array();
  for (var i = 0; i < Lat.length; i++) {
    var pos = new google.maps.LatLng(Lat[i], Lng[i]);
    Poly.push(pos);
  }
  var flowlineNonGeodesic = new google.maps.Polyline({
    path: Poly,
    geodesic: false,
    strokeColor: "#00FF00",
    strokeOpacity: .8,
    strokeWeight: 2,
    map: map
  });
  for (var j = 0; j < Poly.length; j++) {
    if (j % 2 == 0) {
      var poly = Poly.slice(j, j + 2);
      var flowline = new google.maps.Polyline({
        path: poly,
        geodesic: true,
        strokeColor: "#DC143C",
        strokeOpacity: .8,
        strokeWeight: 2,
        icons: [{
          icon: lineSymbol,
          offset: '100%'
        }],
      });
      flowline.setMap(map);
    }
  }
}
google.maps.event.addDomListener(window, "load", initMap);

var Lat = [42.365843, 37.756066, 47.450431, 28.431450, 38.898793, 34.040667];
var Lng = [-71.009625, -122.440175, -122.308806, -81.308094, -77.037227, -118.289537];

var lineSymbol = {
  path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>