Построение нескольких полилиний на Картах Google

-1

Я новичок в программировании с помощью Javascript и Google Maps, поэтому это может быть довольно простой вопрос. Я хотел бы построить несколько полилиний на карте Google. У меня написан код, который рисует линии, но все они подключены, а не дискретны. Я попытался реализовать несколько решений, которые я нашел здесь, но либо карта вообще не отображается, либо она работает, а полилинии все еще подключены. См. Прилагаемый образ ошибочного результата. Map of multiple polylines Построение нескольких полилиний на Картах 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>

источник

2015-01-20 slowmotionfred

В чем проблема? Как линии разделяются? Все ли они единичные сегменты? – geocodezip

Должно быть 10 отдельных сегментов. – slowmotionfred

Да, но как они организованы в ваших входных массивах? У вас есть три уровня массива. Значит ли третий уровень? – geocodezip

Я думаю, что вы хотите: 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>

источник

2015-01-20 02:15:13 geocodezip

Хорошо, что имеет смысл. Большое спасибо @geocodezip! Это сильно загломило меня в течение дня. – slowmotionfred

Построение нескольких полилиний на Картах Google

ответ

Смежные вопросы