여러 Google지도 폴리 라인

필자는이 코드를 사용하여 필자가 필요로하는 작업을 수행하려고합니다. 이는 내지도에서 다중 폴리 라인 기점과 대상을 가지며 원점 마커를 클릭하여 텍스트를 표시 할 수있는 기능입니다. 노선.여러 Google지도 폴리 라인

이 예제의 문제점은 목적지가 단 하나의 위도/경도이지만 문제의 고유 마커 텍스트/제목뿐만 아니라 각 오리진마다 다른 목적지 위도/경도를 추가해야한다는 점입니다. 누구든지이 일을하는 방법을 보여줄 수 있습니까?

도움 주셔서 감사합니다.

<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]],

그래서 그들은 11.2583입니다 domain[0], 75.1374 다른 좌표 lineCoordinates[i]에서 시작하지만 동일한에서 결국 . 실제로 종료 할 위치를 결정한 다음 그에 따라 코드를 작성해야합니다.

출처

2013-08-09 12:02:07 Salman

고마워, 네 말이 맞습니다. 문제는, 어떻게 코딩 해야할지 모르겠다. :) – user2666528

그러면 자바 스크립트를 공부하는 것이 더 좋다. – Salman

여러 Google지도 폴리 라인

답변

관련 문제