在路線中使用航點 - 路線服務谷歌地圖

Question

如果我添加航點到我的谷歌地圖 - 功能calcRoute無法正常工作。 如何正確設置航點？

謝謝。

<script> 
     var directionDisplay; 
     var directionsService = new google.maps.DirectionsService(); 
     var map; 

     function initialize() { 
     directionsDisplay = new google.maps.DirectionsRenderer(); 
     var chicago = new google.maps.LatLng(41.850033, -87.6500523); 
     var mapOptions = { 
      zoom:55, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      center: chicago 
     } 
     map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 
     directionsDisplay.setMap(map); 
     } 

     function calcRoute() { 

     var start = "Berlin"; 
     var end = "Paris"; 
     var waypts = ["Frankfurt"]; 

    var request = { 
      origin:start, 
      destination:end, 
      waypoints:waypts, 
      optimizeWaypoints: true, 
      travelMode: google.maps.DirectionsTravelMode.DRIVING 
     }; 
     directionsService.route(request, function(response, status) { 
      if (status == google.maps.DirectionsStatus.OK) { 
      directionsDisplay.setDirections(response); 
      } 
     }); 
     } 
    </script> 

https://developers.google.com/maps/documentation/javascript/directions?hl=pl#Waypoints

Answer 1

閱讀您引用文檔中，字符串 「法蘭克福」 不是有效waypoint。

與位置「法蘭克福」一個單一的航點是這樣的：

[{ location: "Frankfurt", stopover: false}] 

與停留的設置適當的值。

Answer 2

下面的腳本可能會對您有所幫助。

<script>  
    var directionsDisplay; 
    var directionsService = new google.maps.DirectionsService(); 
    function showmap() 
    { 
      jQuery.ajax({ 
      type: "POST", 
      url: "getLocations", 
      dataType:"json", 
      success: function(data){   
      var obj = jQuery.parseJSON(data); 
      var LocationData=[]; 
      var i=0; 
      obj.forEach(function(entry) { 
       entry.forEach(function(test){       
       LocationData[i] = test 
       i++;     
      });     
      }); 
      var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 15, 
      center: new google.maps.LatLng(LocationData[0].latitude,LocationData[0].longitude), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
      }); 

      directionsDisplay = new google.maps.DirectionsRenderer(); 
      directionsDisplay.setMap(map); 
      var start = new google.maps.LatLng(LocationData[0].latitude,LocationData[0].longitude); 
      var end = new google.maps.LatLng(LocationData[obj[0].length-1].latitude,LocationData[obj[0].length-1].longitude); 
      var waypts = []; 
      var upto = obj[0].length-1; 
      if(upto > 7) 
      upto = 7; 
      if(obj[0].length > 2) { 
      for (var i = 1; i < upto; i++) { 
       waypts.push({ 
       location: new google.maps.LatLng(LocationData[i].latitude,LocationData[i].longitude), 
       stopover: true 
       }); 
      } 
      } 
      calcRoute(start,end,waypts); 
     } 
     });   
    } 

    function calcRoute(start,end,waypts) { 
     var request = { 
      origin: start, 
      destination: end, 
      waypoints: waypts, 
      travelMode: google.maps.DirectionsTravelMode.DRIVING 
     }; 
     directionsService.route(request, function(response, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
      directionsDisplay.setDirections(response); 
     } 
     }); 
    } 
    </script>