DirectionsServiceで地図（Google Maps API）のルートを表示するにはどうすればよいですか？

Question

Googleの地図は新しく、4つの最適化されたウェイポイントを通過するルートを表示するようにコードを作成しようとしています。私のコードはDirectionsServiceの例（https://developers.google.com/maps/documentation/javascript/examples/directions-waypoints）に基づいていますが、私は自分のコードがうまく動作しないことを理解できないようです。私は何度もサンプルコードを読んできましたが、私には何も見当たりません。現在、私のコードはコードの最初の部分に設定したマーカーのみを表示します。どんな助けでも大歓迎です、ありがとうございます。

 //map details, i.e. creates a map of Lucca 
var mapOptions = { 
    center: new google.maps.LatLng(43.8430,10.5050), 
    zoom: 15, 
    mapTypeId: google.maps.MapTypeId.SATELLITE 
}; 



//create map 
var map = new google.maps.Map(document.getElementById('map'), mapOptions); 

//marker details 
var markerOptions1 = { 
    position: new google.maps.LatLng(43.8402250, 10.5008083) 
}; 
var markerOptions2 = { 
    position: new google.maps.LatLng(43.83811, 10.50328) 
}; 
var markerOptions3 = { 
    position: new google.maps.LatLng(43.8439194, 10.5032083) 
}; 
var markerOptions4 = { 
    position: new google.maps.LatLng(43.8405167, 10.5038722) 
}; 

//creates markers 
var marker1 = new google.maps.Marker(markerOptions1); 
var marker2 = new google.maps.Marker(markerOptions2); 
var marker3 = new google.maps.Marker(markerOptions3); 
var marker4 = new google.maps.Marker(markerOptions4); 

//sets markers 
marker1.setMap(map); 
marker2.setMap(map); 
marker3.setMap(map); 
marker4.setMap(map); 

//marker info windows 
var infoWindowOptions1 = { 
    content: '1' 
}; 

var infoWindowOptions2 = { 
    content: '2' 
}; 

var infoWindowOptions3 = { 
    content: '3' 
}; 

var infoWindowOptions4 = { 
    content: '4' 
}; 

//Events for clicking on the markers 
var infoWindow1 = new google.maps.InfoWindow(infoWindowOptions1); 
google.maps.event.addListener(marker1,'click',function(e){ 
    infoWindow1.open(map, marker1); 
}); 

var infoWindow2 = new google.maps.InfoWindow(infoWindowOptions2); 
google.maps.event.addListener(marker2,'click',function(e){ 
    infoWindow2.open(map, marker2); 
}); 

var infoWindow3 = new google.maps.InfoWindow(infoWindowOptions3); 
google.maps.event.addListener(marker3,'click',function(e){ 
    infoWindow3.open(map, marker3); 
}); 

var infoWindow4 = new google.maps.InfoWindow(infoWindowOptions4); 
google.maps.event.addListener(marker4,'click',function(e){ 
    infoWindow4.open(map, marker4); 
}); 



/* document.getElementById('submit').addEventListener('click', function() { 
    calculateAndDisplayRoute(directionsService, directionsDisplay); 
    }); 
} */ 


var directionsService = new google.maps.DirectionsService(); 

directionsDisplay.setMap(map); 

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

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




function calcRoute() { 

    var waypts = []; 

    stop = new google.maps.LatLng(43.8402250, 10.5008083) 
    waypts.push({ 
     location: stop, 
     stopover: true 
    }); 
    stop = new google.maps.LatLng(43.83811, 10.50328) 
    waypts.push({ 
     location: stop, 
     stopover: true 
    }); 
    stop = new google.maps.LatLng(43.8439194, 10.5032083) 
    waypts.push({ 
     location: stop, 
     stopover: true 
    }); 
    stop = new google.maps.LatLng(43.8405167, 10.5038722) 
    waypts.push({ 
     location: stop, 
     stopover: true 
    }); 

    start = new google.maps.LatLng(43.8405167, 10.6038722); 
    end = new google.maps.LatLng(43.8405167, 10.6038722); 

    var request = { 
     origin: start, 
     destination: end, 
     waypoints: waypts, 
     optimizeWaypoints: true, 
     travelMode: google.maps.DirectionsTravelMode.WALKING 
    }; 

    directionsService.route(request, function (response, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
      directionsDisplay.setDirections(response); 
      var route = response.routes[0]; 
     } 
    }); 
} 

initialize(); 

Answer 1

私は正しい質問を理解していれば、この方法で解決できます。 まず、あなたがポリラインが必要になります。

poly = new google.maps.Polyline({ 
     path: [], 
     strokeColor: "#58FA58", 
     strokeOpacity: 1.0, 
     strokeWeight: 5 
    }); 

は今、あなたはちょうどdirectionServiceのあなたの結果を介して実行する必要がある、とポリラインを埋めます。これは、この方法を行うことができます。

poly.setMap(map). 

それを行う必要があります。

var bounds = new google.maps.LatLngBounds(); 
service.route({ 
     origin: startAddress, 
     destination: endAddress, 
     waypoints: wayPoints, 
     region: "DE", 
     travelMode: google.maps.TravelMode.DRIVING 
    }, function (response, status) { 
     //console.log(response.routes[0].legs); 
     if (status == google.maps.DirectionsStatus.OK) { 
      var legs = response.routes[0].legs; 
      for (i = 0; i < legs.length; i++) { 
       var steps = legs[i].steps; 
       for (j = 0; j < steps.length; j++) { 
        //console.log(steps[j].instructions); 
        var nextSegment = steps[j].path; 
        for (k = 0; k < nextSegment.length; k++) { 
         poly.getPath().push(nextSegment[k]); 
         bounds.extend(nextSegment[k]); 
        } 
       } 
      } 
     } else { 
      alert("Something went wrong" + status); 
     } 
    }); 

は、最後に地図上にポリラインを設定します。

このタスクにDirectionsRenderを使用しないことで大きな違いがあるかどうかはわかりませんが、このコードは指定されたウェイポイントを考慮して2つのポイント間のルートをペイントします。