Question

我刚开始使用Javascript和Google地图进行编程，所以这可能是一个非常简单的问题。我想在Google Map上绘制多条折线。我编写了代码来绘制线条，但它们都是连接而不是离散的。我已经尝试实现了我在这里找到的几种解决方案，但要么地图根本不显示，要么它确实显示，折线仍然连接。请参阅有缺陷结果的附图。 Map of multiple polylines

有没有人有任何建议来纠正这个问题？谢谢你的帮助。代码如下：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas
{
  height: 90%;
  margin: 5px;
  padding: 1px;
}
</style>
</head>
<body>
<div id="map-canvas"></div>

<script src="https://maps.googleapis.com/maps/api/js?v=3"
        type="text/javascript">
</script>

<script>

var map;
var trackLats = [ [ [  14.735, -20.595 ], [ -13.913,   8.188 ] ],
                  [ [ -14.788,  20.562 ], [  13.879,  -8.230 ] ],
                  [ [  14.784, -20.546 ], [ -13.818,   8.288 ] ],
                  [ [ -14.837,  20.513 ], [  13.784,  -8.329 ] ],
                  [ [  14.892, -20.439 ], [ -13.758,   8.350 ] ] ];
var trackLons = [ [ [   76.480,   90.967 ], [   68.509,   98.386 ] ],
                  [ [ -115.254, -100.759 ], [ -123.226,  -93.342 ] ],
                  [ [   53.036,   67.521 ], [   45.065,   74.937 ] ],
                  [ [ -138.698, -124.204 ], [ -146.669, -116.791 ] ],
                  [ [   29.567,   44.049 ], [   21.570,   51.438 ] ] ];

function initialize()
{

  var mapCenter = new google.maps.LatLng(0.0, 139.0);
  var mapOptions =
      {
        zoom: 2,
        center: mapCenter,
        mapTypeId: google.maps.MapTypeId.HYBRID
      };
  map = new google.maps.Map(document.getElementById('map-canvas'),
                            mapOptions);

  var trackCoords = new google.maps.MVCArray;
  var i, j, k;

  for ( i=0 ; i<5 ; i++ )
  {
    for ( j=0 ; j<2 ; j++ )
    {
      for ( k=0 ; k<2 ; k++ )
      {
        trackCoords.push(new google.maps.LatLng(trackLats[i][j][k],
                                                trackLons[i][j][k]));
      }

      var trackLine = new google.maps.Polyline(
      {
        map: map,
        path: trackCoords,
        geodesic: true,
        strokeColor: '#FFFFFF',
        strokeOpacity: 0.1,
        strokeWeight: 3
      });

      trackCoords.clear;
    }
  }
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>
</body>
</html>

Answer 1

我想你想要这个： working fiddle

每对坐标定义一个线段。绘制每个线段后，启动一个新的点阵列和一个新的google.maps.Polyline。

工作代码段：

var map;
var trackLine = [];
var trackLats = [
  [
    [14.735, -20.595],
    [-13.913, 8.188]
  ],
  [
    [-14.788, 20.562],
    [13.879, -8.230]
  ],
  [
    [14.784, -20.546],
    [-13.818, 8.288]
  ],
  [
    [-14.837, 20.513],
    [13.784, -8.329]
  ],
  [
    [14.892, -20.439],
    [-13.758, 8.350]
  ]
];
var trackLons = [
  [
    [76.480, 90.967],
    [68.509, 98.386]
  ],
  [
    [-115.254, -100.759],
    [-123.226, -93.342]
  ],
  [
    [53.036, 67.521],
    [45.065, 74.937]
  ],
  [
    [-138.698, -124.204],
    [-146.669, -116.791]
  ],
  [
    [29.567, 44.049],
    [21.570, 51.438]
  ]
];

function initialize() {

  var mapCenter = new google.maps.LatLng(0.0, 139.0);
  var mapOptions = {
    zoom: 1,
    center: mapCenter,
    mapTypeId: google.maps.MapTypeId.HYBRID
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  var trackCoords = new google.maps.MVCArray;
  var i, j, k;

  for (i = 0; i < 5; i++) {
    for (j = 0; j < 2; j++) {
      trackCoords = [];
      for (k = 0; k < 2; k++) {
        trackCoords.push(new google.maps.LatLng(trackLats[i][j][k],
          trackLons[i][j][k]));
      }

      trackLine.push(new google.maps.Polyline({
        map: map,
        path: trackCoords,
        geodesic: true,
        strokeColor: '#FFFFFF',
        strokeOpacity: 0.4,
        strokeWeight: 3
      }));

      trackCoords.clear;
    }
  }
}

google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  height: 90%;
  margin: 5px;
  padding: 1px;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>

在Google地图上绘制多条折线

1 个答案: