Google Maps Несколько геодезических путей от одного маркера

Я пытаюсь создать карту Google, которая будет отображать несколько геодезических линий, исходящих от одного маркера, до двух или более отдельных маркеров на карте. Я могу разместить несколько маркеров на карте, но у меня возникли проблемы с выяснением того, как иметь два или более пути от одного маркера на карте. В настоящее время это, как он показывает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. –

Спасибо, Джек, я получил его для работы в моем коде, комментируя части document.getElementId. Возможно, у меня там синтаксическая ошибка. Спасибо за помощь и правильное решение. –

Google Maps Несколько геодезических путей от одного маркера

ответ

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