Нанесение нескольких полилиний на Google Maps

Я новичок в программировании с помощью Javascript и Google Maps, поэтому это может быть довольно простой вопрос. Я хотел бы построить несколько полилиний на карте Google. У меня есть написанный код, который рисует линии, но все они связаны, а не дискретны. Я попытался реализовать несколько решений, которые нашел здесь, но либо карта вообще не отображается, либо отображается, и все полилинии все еще связаны. См. прикрепленное изображение ошибочного результата.Карта нескольких полилиний

У кого-нибудь есть предложения по исправлению этой проблемы? Спасибо за вашу помощь. Код ниже:

<!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>

google-maps javascript google-polyline
person slowmotionfred    schedule 20.01.2015    source источник
comment
В чем проблема? Как линии разделяются? Они все односегментные?   -  person geocodezip    schedule 20.01.2015
comment
Должно получиться 10 отдельных сегментов.   -  person slowmotionfred    schedule 20.01.2015
comment
Да, но как они организованы в ваших входных массивах? У вас есть три уровня массива. Означает ли что-нибудь третий уровень?   -  person geocodezip    schedule 20.01.2015

Ответы (1)


arrow_upward
1
arrow_downward

Я думаю, вам нужно следующее: рабочая скрипка

Каждая пара координат определяет один сегмент линии. После рисования каждого сегмента линии начните новый массив точек и новую 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>

person geocodezip    schedule 20.01.2015
comment
Хорошо, это имеет смысл. Большое спасибо @geocodezip! Это поставило меня в тупик большую часть дня. - person slowmotionfred; 20.01.2015