Google Maps 하나의 마커에서 다중 측지선 경로

하나의 마커에서 시작된 여러 개의 측설 선을지도에 두 개 이상의 별도 마커로 표시하려는 Google지도를 만들려고합니다. 맵에 여러 마커를 배치 할 수 있지만 맵의 마커에서 경로가 2 개 이상되는 방법을 파악하는 데 문제가 있습니다. 이Google Maps 하나의 마커에서 다중 측지선 경로

Current Map

을 표시 어떻게 현재이 여기

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry"></script> 
<script type="text/javascript"> 

    var geodesicPoly1; 
    var geodesicPoly2; 
    var marker1; 
    var marker2; 
    var marker3; 

    function initialize() { 
    var myOptions = { 
     zoom: 4, 
     center: new google.maps.LatLng(39.0997, -94.5786), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions); 

    marker1 = new google.maps.Marker({ 
     map: map, 
     draggable: false, 
     position: new google.maps.LatLng(33.7490, -84.3880) 
    }); 

    marker2 = new google.maps.Marker({ 
     map: map, 
     draggable: false, 
     position: new google.maps.LatLng(33.4484, -112.0740) 
    }); 

    marker3 = new google.maps.Marker({ 
     map: map, 
     draggable: false, 
     position: new google.maps.LatLng(37.9577, -121.2908) 
    }); 

    var geodesicOptions = { 
     strokeColor: '#77bf44', 
     strokeOpacity: 1.0, 
     strokeWeight: 3, 
     geodesic: true, 
     map: map 
    }; 

    geodesicPoly1 = new google.maps.Polyline(geodesicOptions); 
    update(); 

    geodesicPoly2 = new google.maps.Polyline(geodesicOptions); 
    update2(); 
    } 


    function update() { 
    var path = [marker1.getPosition(), marker2.getPosition()]; 
    geodesicPoly1.setPath(path); 

    var heading = google.maps.geometry.spherical.computeHeading(path[0], path[1]); 
    document.getElementById('heading').value = heading; 
    document.getElementById('origin').value = path[0].toString(); 
    document.getElementById('destination').value = path[1].toString(); 
    } 

    function update2() { 
    var path = [marker1.getPosition(), marker3.getPosition()]; 
    geodesicPoly2.setPath(path); 

    var heading = google.maps.geometry.spherical.computeHeading(path[0], path[1]); 
    document.getElementId('heading').value = heading; 
    document.getElementId('origin').value = path[0].toString(); 
    document.getElementId('destination').value = path[1].toString(); 
    } 


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

</script>

출처

2012-05-30 Jason Tremain

폴리 라인은 두 지점 사이에 그릴 수 있습니다지도에 대한 내 편집 스크립트입니다이다. 둘 이상의 Polyline 변수를 만들어야합니다. 문제가 코드에서 어디

<html> 
<head> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script> 
    <script type="text/javascript" 
    src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry"></script> 
    <script type="text/javascript"> 

    var geodesicPoly1; 
    var geodesicPoly2; 
    var marker1; 
    var marker2; 
    var marker3; 
    var heading = "cat"; 
    var map; 

    function initialize() 
    { 
     var myOptions = { 
     zoom: 4, 
     center: new google.maps.LatLng(39.0997, -94.5786), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

     map = new google.maps.Map(document.getElementById('map_canvas'), 
      myOptions); 

     marker1 = new google.maps.Marker({ 
     map: map, 
     draggable: false, 
     position: new google.maps.LatLng(33.7490, -84.3880) 
     }); 

     marker2 = new google.maps.Marker({ 
     map: map, 
     draggable: false, 
     position: new google.maps.LatLng(33.4484, -112.0740) 
     }); 

     marker3 = new google.maps.Marker({ 
     map: map, 
     draggable: false, 
     position: new google.maps.LatLng(37.9577, -121.2908) 
     }); 

     var geodesicOptions = { 
     strokeColor: '#77bf44', 
     strokeOpacity: 1.0, 
     strokeWeight: 3, 
     geodesic: true, 
     map: map 
     }; 
     geodesicPoly1 = new google.maps.Polyline(geodesicOptions); 
     geodesicPoly2 = new google.maps.Polyline(geodesicOptions); 

     update(); 
     update2(); 

    } 

    function update() { 
     var path = [marker1.getPosition(), marker2.getPosition()]; 

     geodesicPoly1.setPath(path); 
     var heading = google.maps.geometry.spherical.computeHeading(path[0], 
      path[1]); 
     document.getElementById('heading').value = heading; 
     document.getElementById('origin').value = path[0].toString(); 
     document.getElementById('destination').value = path[1].toString(); 
    } 

    function update2() { 
     var path2 = [marker1.getPosition(), marker3.getPosition()]; 

     geodesicPoly2.setPath(path2); 
     var heading2 = google.maps.geometry.spherical.computeHeading(path2[0], 
      path2[1]); 
     document.getElementById('heading').value = heading; 
     document.getElementById('origin').value = path2[0].toString(); 
     document.getElementById('destination').value = path2[1].toString(); 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
</head> 
<body > 
    <div id="map_canvas" style='height:500px; width:800px;'></div> 
    <div id='heading'></div> 
    <div id='origin'></div> 
    <div id='destination'></div> 
</body> 
</html>

enter image description here

출처

2012-05-30 13:48:33

나는 확실하지 않다. IE 및 Chrome에서 작동하는 전체 코드 파일을 제공했습니다. –

Thanks Jack 나는 document.getElementId 부분을 주석 처리하여 코드에서 작동하도록했습니다. 어딘가에 구문 오류가있을 수 있습니다. 도움과 올바른 솔루션을 주셔서 감사합니다. –

Google Maps 하나의 마커에서 다중 측지선 경로

답변

관련 문제