Google지도에서 경로 표시 도로 사용

Question

나는 경도와 위도가 여러 개 있습니다. 예를위한 루프처럼 시작 :

1 긴 위도, 시작점

2 긴 북

3 긴 북

4 긴 북

.

. 는

n 번째 끝에 긴 위도 점

내 코드

입니다 : 난 얼굴 문제 라인이 네 번째 지점으로 직접 세 번째 점 하나 하나를 연결 한

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript"> 
    var markers = [ 
     { 
      "title": '1', 
      "lat": '30.705911', 
      "lng": '76.679656', 
      "description": '1' 
     } 
    , 
    { 
      "title": '2', 
      "lat": '30.701713', 
      "lng": '76.684097', 
      "description": '2' 
     }, 
    { 
      "title": '2', 
      "lat": '30.703291', 
      "lng": ' 76.701022', 
      "description": '2' 
     },{ 
      "title": '2', 
      "lat": '30.691888', 
      "lng": ' 76.710721', 
      "description": '2' 
      } 

]; 
    window.onload = function() { 
     var mapOptions = { 
      center: new google.maps.LatLng(markers[0].lat, markers[0].lng), 
      zoom: 10, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions); 
     var infoWindow = new google.maps.InfoWindow(); 
     var lat_lng = new Array(); 
     var latlngbounds = new google.maps.LatLngBounds(); 
     for (i = 0; i < markers.length; i++) { 
      var data = markers[i] 
      var myLatlng = new google.maps.LatLng(data.lat, data.lng); 
      lat_lng.push(myLatlng); 
      var marker = new google.maps.Marker({ 
       position: myLatlng, 
       map: map, 
       title: data.title 
      }); 
      latlngbounds.extend(marker.position); 
      (function (marker, data) { 
       google.maps.event.addListener(marker, "click", function (e) { 
        infoWindow.setContent(data.description); 
        infoWindow.open(map, marker); 
       }); 
      })(marker, data); 
     } 
     map.setCenter(latlngbounds.getCenter()); 
     map.fitBounds(latlngbounds); 

     //***********ROUTING****************// 

     //Intialize the Path Array 
     var path = new google.maps.MVCArray(); 

     //Intialize the Direction Service 
     var service = new google.maps.DirectionsService(); 

     //Set the Path Stroke Color 
     var poly = new google.maps.Polyline({ map: map, strokeColor: '#4986E7' }); 

     //Loop and Draw Path Route between the Points on MAP 
     for (var i = 0; i < lat_lng.length; i++) { 
      if ((i + 1) < lat_lng.length) { 
       var src = lat_lng[i]; 
       var des = lat_lng[i + 1]; 
       path.push(src); 
       poly.setPath(path); 
       service.route({ 
        origin: src, 
        destination: des, 
        travelMode: google.maps.DirectionsTravelMode.DRIVING 
       }, function (result, status) { 
        if (status == google.maps.DirectionsStatus.OK) { 
         for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) { 
          path.push(result.routes[0].overview_path[i]); 
         } 
        } 
       }); 
      } 
     } 
    } 
</script> 
<div id="dvMap" style="width: 800px; height: 800px"> 
</div> 

Answer 1

하지 마십시오 src을 경로로 밀어 넣으면 개요 경로의 첫 번째 점과 중복됩니다.

path.push(src); 

working fiddle

코드 :

var markers = [{ 
 
    "title": '1', 
 
    "lat": '30.705911', 
 
    "lng": '76.679656', 
 
    "description": '1' 
 
    }, { 
 
    "title": '2', 
 
    "lat": '30.701713', 
 
    "lng": '76.684097', 
 
    "description": '2' 
 
    }, { 
 
    "title": '2', 
 
    "lat": '30.703291', 
 
    "lng": ' 76.701022', 
 
    "description": '2' 
 
    }, { 
 
    "title": '2', 
 
    "lat": '30.691888', 
 
    "lng": ' 76.710721', 
 
    "description": '2' 
 
    } 
 

 
]; 
 
window.onload = function() { 
 
    var mapOptions = { 
 
    center: new google.maps.LatLng(markers[0].lat, markers[0].lng), 
 
    zoom: 10, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 
    var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions); 
 
    var infoWindow = new google.maps.InfoWindow(); 
 
    var lat_lng = new Array(); 
 
    var latlngbounds = new google.maps.LatLngBounds(); 
 
    for (i = 0; i < markers.length; i++) { 
 
    var data = markers[i] 
 
    var myLatlng = new google.maps.LatLng(data.lat, data.lng); 
 
    lat_lng.push(myLatlng); 
 
    var marker = new google.maps.Marker({ 
 
     position: myLatlng, 
 
     map: map, 
 
     title: data.title 
 
    }); 
 
    latlngbounds.extend(marker.position); 
 
    (function(marker, data) { 
 
     google.maps.event.addListener(marker, "click", function(e) { 
 
     infoWindow.setContent(data.description); 
 
     infoWindow.open(map, marker); 
 
     }); 
 
    })(marker, data); 
 
    } 
 
    map.setCenter(latlngbounds.getCenter()); 
 
    map.fitBounds(latlngbounds); 
 

 
    //***********ROUTING****************// 
 

 
    //Intialize the Path Array 
 
    var path = new google.maps.MVCArray(); 
 

 
    //Intialize the Direction Service 
 
    var service = new google.maps.DirectionsService(); 
 

 
    //Set the Path Stroke Color 
 
    var poly = new google.maps.Polyline({ 
 
    map: map, 
 
    strokeColor: '#4986E7' 
 
    }); 
 

 
    //Loop and Draw Path Route between the Points on MAP 
 
    for (var i = 0; i < lat_lng.length; i++) { 
 
    if ((i + 1) < lat_lng.length) { 
 
     var src = lat_lng[i]; 
 
     var des = lat_lng[i + 1]; 
 
     // path.push(src); 
 
     poly.setPath(path); 
 
     service.route({ 
 
     origin: src, 
 
     destination: des, 
 
     travelMode: google.maps.DirectionsTravelMode.DRIVING 
 
     }, function(result, status) { 
 
     if (status == google.maps.DirectionsStatus.OK) { 
 
      for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) { 
 
      path.push(result.routes[0].overview_path[i]); 
 
      } 
 
     } 
 
     }); 
 
    } 
 
    } 
 
}

html, 
 
body, 
 
#dvMap { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="http://maps.google.com/maps/api/js"></script> 
 
<div id="dvMap" ></div>