Google地圖具有點擊按鈕上的不同路線

-1
假設我想要顯示從地圖（例如賓館）到地圖上的城市博物館的不同路線。Google地圖具有點擊按鈕上的不同路線
我會創建儘可能多的按鈕作爲博物館，然後顯示給大家從地圖上酒店的路線。
當我點擊按鈕時，地圖應該顯示相對路線。
我該怎麼做，使用一些JavaScript和谷歌地圖？
在此先感謝。
來源
2017-05-09 Francesco
Thsi是我工作的解決方案：
<!DOCTYPE html> 
<html> 
    <head> 
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
     <meta charset="utf-8"> 
     <title>Directions service (complex)</title> 
     <style> 
      html, body { 
      height: 100%; 
      margin: 0; 
      padding: 0; 
      } 
      #map { 
      height: 100%; 
      } 
      #panel { 
      position: absolute; 
      top: 10px; 
      left: 25%; 
      z-index: 5; 
      background-color: #fff; 
      padding: 5px; 
      border: 1px solid #999; 
      text-align: center; 
      } 

      /** 
      * Provide the following styles for both ID and class, where ID represents an 
      * actual existing "panel" with JS bound to its name, and the class is just 
      * non-map content that may already have a different ID with JS bound to its 
      * name. 
      */ 

      #panel, .panel { 
      font-family: 'Roboto','sans-serif'; 
      line-height: 30px; 
      padding-left: 10px; 
      } 

      #panel select, #panel input, .panel select, .panel input { 
      font-size: 15px; 
      } 

      #panel select, .panel select { 
      width: 100%; 
      } 

      #panel i, .panel i { 
      font-size: 12px; 
      } 

     </style> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    </head> 
    <body> 
     <div id="panel"> 

      <b>End: </b> 
      <button class="destinationclass" value="45.711728,11.353489">Teatro Civico</button> 
      <button class="destinationclass" value="45.71133,11.3556101">BAR SPORT</button> 
      <button class="destinationclass" value="45.710605,11.3550563">PIZZERIA</button> 
      <button class="destinationclass" value="45.7128063,11.358291">Comune di Schio</button> 


     </div> 
     <div id="map"></div> 
     &nbsp; 
     <div id="warnings_panel" style="width:100%;height:10%;text-align:center"></div> 
     <script> 

      function initMap() { 
       var markerArray = []; 

       // Instantiate a directions service. 
       var directionsService = new google.maps.DirectionsService; 

       // Create a map and center it on Manhattan. 
       var initialplace = new google.maps.LatLng(45.712776,11.3586919); 

       var map = new google.maps.Map(document.getElementById('map'), { 
        zoom: 15, 
        center: initialplace 
       }); 

       var destinationclicked = "45.711728,11.353489"; 

       // Create a renderer for directions and bind it to the map. 
       var directionsDisplay = new google.maps.DirectionsRenderer({map: map}); 

       // Instantiate an info window to hold step text. 
       var stepDisplay = new google.maps.InfoWindow; 

       // Display the route between the initial start and end selections. 
       calculateAndDisplayRoute(
       directionsDisplay, directionsService, markerArray, stepDisplay, map); 
       // Listen to change events from the start and end lists. 
       var onChangeHandler = function() { 
        calculateAndDisplayRoute(
        directionsDisplay, directionsService, markerArray, stepDisplay, map); 
       }; 
       $(".destinationclass").addEventListener('change', onChangeHandler); 
      } 

      function calculateAndDisplayRoute(directionsDisplay, directionsService, 
      markerArray, stepDisplay, map) { 
       // First, remove any existing markers from the map. 
       for (var i = 0; i < markerArray.length; i++) { 
        markerArray[i].setMap(null); 
       } 


       // Retrieve the start and end locations and create a DirectionsRequest using 
       // WALKING directions. 
       directionsService.route({ 
        origin: "45.712776,11.3586919", 
        destination: "45.711728,11.353489", 
        travelMode: google.maps.TravelMode.DRIVING 
       }, 
       function(response, status) { 
        // Route the directions and pass the response to a function to create 
        // markers for each step. 
        if (status === google.maps.DirectionsStatus.OK) { 
         document.getElementById('warnings_panel').innerHTML = 
         '<b>' + response.routes[0].warnings + '</b>'; 
         directionsDisplay.setDirections(response); 
         showSteps(response, markerArray, stepDisplay, map); 
         } else { 
         window.alert('Directions request failed due to ' + status); 
        } 
       }); 


       $(".destinationclass").click(function() { 
        var destinationclicked = $(this).val(); 

        // Retrieve the start and end locations and create a DirectionsRequest using 
        // WALKING directions. 
        directionsService.route({ 
         origin: "45.712776,11.3586919", 
         destination: destinationclicked, 
         travelMode: google.maps.TravelMode.DRIVING 
        }, 
        function(response, status) { 
        // Route the directions and pass the response to a function to create 
        // markers for each step. 
        if (status === google.maps.DirectionsStatus.OK) { 
         document.getElementById('warnings_panel').innerHTML = 
         '<b>' + response.routes[0].warnings + '</b>'; 
         directionsDisplay.setDirections(response); 
         showSteps(response, markerArray, stepDisplay, map); 
         } else { 
         window.alert('Directions request failed due to ' + status); 
        } 
       }); 
      }); 
     } 





    </script> 
    <script src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap" 
    async defer></script> 
</body> 
</html>
來源
2017-05-09 16:58:05 Francesco
Google地圖具有點擊按鈕上的不同路線

回答

相關問題
