구글지도 위치 서비스 경로

Question

내가 자바 스크립트를 points.Using 둘 사이의 최단 경로지도 경로 마일을 그리려는 - 그것은 두 번 클릭으로 시작 지점 생성 처음지도를 클릭 directionsService.route

Answer 1

로 지도에 두 번째 점을 만들고 경로를 그립니다.

var map; 
    var infowindow = new google.maps.InfoWindow(); 
    var wayA;[![enter image description here][1]][1] 
    var wayB; 
    var geocoder = new google.maps.Geocoder(); 
    var directionsDisplay = new google.maps.DirectionsRenderer({ 
     suppressMarkers: true, 
     panel: document.getElementById('right-panel'), 
     draggable: true 
    }); 
    var directionsService = new google.maps.DirectionsService(); 
    var data = {}; 
    initMap(); 
    function initMap() { 
     debugger; 
     map = new google.maps.Map(document.getElementById('rmap'), { 
      center: new google.maps.LatLng(23.030357, 72.517845), 
      zoom: 15 
     }); 
     google.maps.event.addListener(map, "click", function (event) { 
      if (!wayA) { 
       wayA = new google.maps.Marker({ 
        position: event.latLng, 
        map: map, 
        icon: "https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=S|00FF00|000000" 
       }); 
      } else { 
       if (!wayB) { 
        debugger; 
        wayB = new google.maps.Marker({ 
         position: event.latLng, 
         map: map, 
         icon: "https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=E|FF0000|000000" 
        }); 
        calculateAndDisplayRoute(directionsService, directionsDisplay, wayA, wayB); 
       } 
      } 
     }); 
    } 
    function computeTotalDistance(result) { 
     var total = 0; 
     var myroute = result.routes[0]; 
     for (var i = 0; i < myroute.legs.length; i++) { 
      total += myroute.legs[i].distance.value; 
     } 
     total = total/1000; 
     return total; 
    } 
    function computeTotalDuration(result) { 
     var total = 0; 
     var myroute = result.routes[0].legs[0].duration.text; 
     return myroute; 
    } 
    function calculateAndDisplayRoute(directionsService, directionsDisplay, wayA, wayB) { 
     debugger; 
     directionsDisplay.setMap(map); 
     google.maps.event.addListener(directionsDisplay, 'directions_changed', function() { 
      debugger; 
      calculateAndDisplayRoute(directionsService, directionsDisplay.getDirections(), wayA, wayB); 
     }); 
     directionsService.route({ 
      origin: wayA.getPosition(), 
      destination: wayB.getPosition(), 
      optimizeWaypoints: true, 
      travelMode: 'DRIVING' 
     }, function (response, status) { 
      if (status === 'OK') { 
       debugger; 
       var route = response.routes[0]; 
       wayA.setMap(null); 
       wayB.setMap(null); 
       pinA = new google.maps.Marker({ 
        position: route.legs[0].start_location, 
        map: map, 
        icon: "https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=S|00FF00|000000" 
       }), 
       pinB = new google.maps.Marker({ 
        position: route.legs[0].end_location, 
        map: map, 
        icon: "https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=E|FF0000|000000" 
       }); 
       google.maps.event.addListener(pinA, 'click', function() { 
        infowindow.setContent("<b>Route Start Address = </b>" + route.legs[0].start_address + " <br/>" + route.legs[0].start_location); 
        infowindow.open(map, this); 
       }); 
       google.maps.event.addListener(pinB, 'click', function() { 
        debugger; 
        infowindow.setContent("<b>Route End Address = </b>" + route.legs[0].end_address + " <br/><b>Distance=</b> " + computeTotalDistance(directionsDisplay.getDirections()) + " Km <br/><b>Travel time=</b> " + computeTotalDuration(directionsDisplay.getDirections()) + " <br/> " + route.legs[0].end_location); 
        infowindow.open(map, this); 
       }); 
      } else { 
       window.alert('Directions request failed due to ' + status); 
      } 
      directionsDisplay.setDirections(response); 
     }); 
    }