Множественные полилинии карты google

Я пытаюсь использовать этот код, чтобы сделать то, что мне нужно, чтобы иметь несколько истоков полилинии и адресатов на моей карте, с возможностью щелчка по маркеру начала, чтобы отобразить текст о маршрут.Множественные полилинии карты google

Проблема с этим примером заключается в том, что место назначения составляет только один лат/длинный, но мне нужно добавить разные точки назначения lat/long для каждого источника, а также уникальный текст/заголовок маркера для каждого. Может ли кто-нибудь показать мне, как это сделать?

Благодарим за помощь.

<html> 
<head> 
<style type="text/css"> 
html { 
    height: 100%; 
    width: 100%; 
} 
body { 
    height: 100%; 
    width: 100% 
    margin: 0; 
    padding: 0 
} 
#map_canvas { 
    height: 100%; 
    width: 100%; 
} 
</style> 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBdTuWJjEUMvQZ6VVPGksE12XNgQgs__Qk&sensor=false&libraries=visualization"></script> 
<script language="javascript"> 
var line; 
var lines = []; 
var myLatlng = new google.maps.LatLng(41.7833, 5.2167); 
var marker; 
function initialize(){ 
var styles = [ 
    { 
    "featureType": "administrative.country", 
    "stylers": [ 
     { "visibility": "off" } 
    ] 
    },{ 
    "featureType": "administrative", 
    "elementType": "geometry", 
    "stylers": [ 
     { "visibility": "off" } 
    ] 
    },{ 
    "featureType": "landscape", 
    "stylers": [ 
     { "visibility": "on" }, 
     { "color": "#C0C0C0" } 
    ] 
    },{ 
    "featureType": "water", 
    "stylers": [ 
     { "visibility": "on" }, 
     { "color": "#FFFFFF" } 
    ] 
    },{ 
    "featureType": "landscape.man_made", 
    "stylers": [ 
     { "visibility": "off" }, 
     { "color": "#efffff" } 
    ] 
    },{ 
    "featureType": "poi", 
    "elementType": "geometry", 
    "stylers": [ 
     { "visibility": "off" } 
    ] 
    },{ 
    "featureType": "transit", 
    "stylers": [ 
     { "visibility": "off" } 
    ] 
    } 
]; 

var symbolOne = { 
    strokeColor: '#F00', 
    fillColor: '#F00', 
    fillOpacity: 1 
}; 

var domain = [new google.maps.LatLng(11.2583, 75.1374)]; 
var markers = []; 

var mapOptions = { 
    zoom:2, 
    center: myLatlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    opacity: 0.2, 
    disableDefaultUI: true, 
    draggable: false, 
    styles: styles 
}; 

map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 

var lineCoordinates = [ 
    new google.maps.LatLng(53.215556, 56.949219), 
    new google.maps.LatLng(75.797201, 125.003906), 
    new google.maps.LatLng(37.7833, 144.9667), 
    new google.maps.LatLng(-24.797201, 26.003906), 
    new google.maps.LatLng(27.797201, -101.003906) 
]; 

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

for(i=0;i<lineCoordinates.length;i++){ 
    markers.push(new google.maps.Marker({ 
    position: lineCoordinates[i], 
    map: map 
    })); 

line = new google.maps.Polyline({ 
    path: [lineCoordinates[i], domain[0]], 
    strokeOpacity: 0.5, 
    strokeWeight:1, 
    strokeColor: '#000', 
    geodesic: false, 
    icons: [{ 
    icon: lineSymbol, 
    offset: '100%', 
    repeat: '60px' 
    }] 
}); 
line.setMap(map); 
lines.push(line); 
} //end of for loop 
// alert(lines.length); 
animate(); 

} //end of initialize function 

function animate(){ 
    var count = 0; 
    offsetId = window.setInterval(function(){ 
    count = (count + 1) % 2000; 
    for (var i=0; i<lines.length; i++) { 
    var icons = lines[i].get('icons'); 
    icons[0].offset = (count/2) + '%'; 
    lines[i].set('icons', icons); 
    } 
    }, 200); 
}// end of animate function 
</script> 
</head> 
<body onLoad="initialize()"> 
    <div id="map_canvas" style="width: 100%; height: 100%; "></div> 
</select> 
</body> 
</html>

источник

2013-08-09 user2666528

Причина, почему все ваши линии заканчиваются в том же пункте назначения из-за этого:

path: [lineCoordinates[i], domain[0]],

Поэтому они начинают в разных lineCoordinates[i], но в конечном итоге на тот же координату domain[0], который 11,2583, 75.1374 , Вам нужно определить, где вы хотите, чтобы они действительно закончились, а затем код соответственно.

источник

2013-08-09 12:02:07 Salman

Спасибо, да, это имеет смысл. Проблема в том, что я не знаю, как правильно кодировать :) – user2666528

Тогда вам лучше начать изучать Javascript. – Salman

Множественные полилинии карты google

ответ

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