GoogleマップのすべてのポリラインのマーカーV3

Question

こんにちは私は質問があります。

ポリラインを描画し、ポリラインのすべてのポイントにマーカーを設定します。しかし、私のコードは、すべての点にマーカーを設定しません。下の図のように、マーカはポリラインの一部にあります。

どのようにしてポリラインごとにマーカーを設定できますか？

function initMap() { 
    var markerArray = []; 
    // Instantiate a directions service. 
    var directionsService = new google.maps.DirectionsService; 
    // Create a map and center it on Manhattan. 
    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 3, 
    center: {lat: 32.224759, lng: 60.298827}, 
    }); 
    // 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); 
    }; 

    document.getElementById('start').addEventListener('change', onChangeHandler); 
    document.getElementById('end').addEventListener('change', onChangeHandler); 
    directionsDisplay.addListener('directions_changed', function() { 
    computeTotalDistance(directionsDisplay.getDirections()); 
    }); 
} 

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 
    // DRIVING directions. 
    directionsService.route({ 
    origin: document.getElementById('start').value, 
    destination: document.getElementById('end').value, 
    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) { 
     var polyline = new google.maps.Polyline({ 
     path: [], 
     strokeColor: '#0000FF', 
     strokeWeight: 3 
     }); 
     var bounds = new google.maps.LatLngBounds(); 
     var legs = response.routes[0].legs; 
     for (var i = 0; i < legs.length; i++) { 
     var steps = legs[i].steps; 
     for (var j = 0; j < steps.length; j++) { 
      var nextSegment = steps[j].path; 
      for (var k = 0; k < nextSegment.length; k++) { 
      polyline.getPath().push(nextSegment[k]); 
      var marker = markerArray[k] = markerArray[k] || new google.maps.Marker; 
      marker.setPosition(nextSegment[k]); 
      bounds.extend(nextSegment[k]); 
      marker.setMap(map); 
      } 
     } 
     } 
     polyline.setMap(map);     
     directionsDisplay.setDirections(response); 
    } else { 
     window.alert('Directions request failed due to ' + status); 
    } 
    }); 
} 

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; 
    document.getElementById('total').innerHTML = total + ' km'; 
} 

Answer 1

私は、コードのこの部分では、あなたの間違い見つけたことを考える：あなたがやった間違いはあなただけの配列のインデックスkを見ていること、である

for (var i = 0; i < legs.length; i++) { 
    ... 
    for (var j = 0; j < steps.length; j++) { 
    ... 
    for (var k = 0; k < nextSegment.length; k++) { 
     ... 
     // Here you add the marker to the array if there is no marker set yet 
     var marker = markerArray[k] = markerArray[k] || new google.maps.Marker; 
     ... 
    } 
    } 
} 

を。ただし、forループが再び開始するたびにkの値は0にリセットされます。そのため、あなたはインデックスに配列の長さを追加する必要があります。

for (var i = 0; i < legs.length; i++) { 
    ... 
    for (var j = 0; j < steps.length; j++) { 
    ... 
    for (var k = 0; k < nextSegment.length; k++) { 
     ... 
     // This is the real index you want to look at 
     var marker = markerArray[markerArray.length + k] = markerArray[markerArray.length + k] || new google.maps.Marker; 
     ... 
    } 
    } 
} 

はしかし、私は実際にこれがアウトに達し、あなたのコードも軽く、より読みやすくなりますことを考える：

for (var i = 0; i < legs.length; i++) { 
    ... 
    for (var j = 0; j < steps.length; j++) { 
    ... 
    for (var k = 0; k < nextSegment.length; k++) { 
     ... 
     // This looks much easier IMHO 
     var marker = new google.maps.Marker; 
     ... 
     markerArray.push(marker); 
    } 
    } 
}