关于谷歌地图的问题获取方向服务V3

Question

我想使用谷歌地图的方向服务为我的网站。由于我第一次使用它，我不知道如何开始。一个很好的示例代码，正是我想要的： Direction example 当我下载它并在我的浏览器（任何浏览器）上运行以获得处理时，地图只渲染一会儿，然后消失！我不知道为什么？！ 第二个问题：有没有这样的例子，你知道吗？

感谢很多提前

Answer 1

要绘制地图在地图上点击路线两次这样的两个生成的路径指向

var map; 
    var infowindow = new google.maps.InfoWindow(); 
    var wayA; 
    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" 
       }); 
       // calculateAndDisplayRoute(directionsService, directionsDisplay, wayA, wayB); 
      } 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); 
     // directionsDisplay.setPanel(document.getElementById('dvPanel')); 
     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); 
     }); 
    }