Google지도 api는 직선을 제거합니다

Question

Google지도 API를 사용하여 MVC 앱을 개발 중입니다. 내 프로그램에 4 개 이상의 좌표가 있습니다. 그에 따르면 도로 경로를 그려야합니다. 지금까지 내 코드입니다.

<div id="dvMap" style="width: 500px; height: 500px"> 
</div> 

@section scripts 
{ 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBZxYACsC1qz9gticRd4mbki9Tes9qexdw&sensor=false"></script> 
<script type="text/javascript"> 
    var markers = [ 
      { 
       "title": 'Canberra', 
       "lat": '-35.2809', 
       "lng": '149.1300', 
       "description": '' 

      }, 
      { 
       "title": 'Sydny', 
       "lat": '-33.8688', 
       "lng": '151.2093', 
       "description": '' 

      }, 
       { 
        "title": 'Tamworth', 
        "lat": '-31.0927', 
        "lng": '150.9320', 
        "description": '' 

       } 
       , 
       { 
        "title": 'Brisbane', 
        "lat": '-27.465895', 
        "lng": '153.019519', 
        "description": '' 

       } 


    ]; 
    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****************// 

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

     //Initialize 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) { 
         console.log('len ' + result.routes[0].overview_path.length) 
         for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) { 
          path.push(result.routes[0].overview_path[i]); 
         } 
        } 
       }); 
      } 
     } 
    } 
</script> 


    } 

지도에는 직선도 표시되어 있습니다.

지도에서 직선을 제거해야합니다 (도로 경로에 선을 그려야 함). 코드에서 무엇이 잘못 되었습니까? 또한 마커는 출발점과 목적지 지점에만 표시되어야합니다. 그러나 모든 포인트는 마커로 표시됩니다. 그렇게하는 법 ...? 나에게 방향을 알려주세요 ....

Answer 1

스크립트의 시작 부분에지도에 마커가 그려져 있습니다. 라인 map: map,

var marker = new google.maps.Marker({ 
     position: myLatlng, 
     // map: map, 
     title: data.title 
    }); 

을 그 의견을 방지하려면지도에서 직선 제거하려면

코멘트 아웃 라인을 당신은에 경로를 표시 할 DirectionsRenderer를 사용할 필요가

//poly.setPath(path); 

일단 경로가 directionsService에 의해 반환되면지도.

여기하려면 DirectionsService

directionsService.route({ 
     origin: src, 
     destination: des, 
     travelMode: google.maps.DirectionsTravelMode.DRIVING 
     }, function(result, status) { 
     // if route is computed successfully, render it on map 
     if (status == google.maps.DirectionsStatus.OK) { 
      console.log('len ' + result.routes[0].overview_path.length); 
      renderDirections(result); 
     } else { 
      console.log("Error: ", status); 
     } 
     }); 

문제의 콜백 함수에 렌더링을 추가 계산 된 경로

function renderDirections(result) { 
    var directionsRenderer = new google.maps.DirectionsRenderer; 
    directionsRenderer.setMap(map); 
    directionsRenderer.setDirections(result); 
}; 

을 렌더링하는 함수를 정의하면 여러 경로를 표시하려는 것입니다 귀하의지도, 자세한 내용은 this question을 확인하십시오.

희망이 도움이됩니다.