谷歌地圖來自一個標記的多個測地線路

我正在嘗試創建一個Google地圖，該地圖將顯示從地圖上的一個標記到2個或多個單獨標記的多個測地線。我可以在地圖上放置我的多個標記，但是我在解決如何從地圖上的一個標記中移除2個或更多路徑時遇到問題。目前，這是它是如何顯示谷歌地圖來自一個標記的多個測地線路

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中使用。 –

謝謝傑克我通過註釋掉document.getElementId部分在我的代碼中工作。也許我在那裏有一個語法錯誤。感謝您的幫助和正確的解決方案。 –

谷歌地圖來自一個標記的多個測地線路

回答

相關問題