ウェイポイントでGoogleマップに距離を表示してルートを表示する

Question

私は、ピックアップアドレス、ドロップオフアドレス、およびユーザーがピックアップとドロップオフの間を移動する訪問領域の配列を追加する必要があるWebアプリケーションで作業しています住所。私がやったことは、地図をルートして、ピックアップとドロップオフアドレスの間の距離を計算することですが、ピックアップとドロップオフとの訪問エリアを一致させることができません。 ここで、私のコードで私は誰がどのようにこれを行うには私のアイデアを与えることができる場合：

このコードは動作していない

function initAutocomplete() { 

var origin_place_id = null; 
var destination_place_id = null; 
var visitarea_place_id = null; 

var travel_mode = google.maps.TravelMode.DRIVING; 

var map = new google.maps.Map(document.getElementById('map-canvas'), { 
    mapTypeControl: false, 
    center: {lat: 30.3753, lng: 69.3451}, 
    zoom: 7, 
    scrollwheel: false, 
    navigationControl: false, 
    mapTypeControl: false, 
    scaleControl: false 
}); 

var directionsService = new google.maps.DirectionsService; 
var directionsDisplay = new google.maps.DirectionsRenderer; 
directionsDisplay.setMap(map); 

var pickup = document.getElementById('pickup'); 
var dropoff = document.getElementById('dropoff'); 
var visitarea = document.getElementById('visitarea'); 


var options = { 
componentRestrictions: {country: 'pk'}//Pakistan only 
}; 

var origin_autocomplete = new google.maps.places.Autocomplete(pickup,options); 
origin_autocomplete.bindTo('bounds', map); 

var destination_autocomplete = new google.maps.places.Autocomplete(dropoff,options); 
destination_autocomplete.bindTo('bounds', map); 

var destination_autocomplete = new google.maps.places.Autocomplete(visitarea,options); 
destination_autocomplete.bindTo('bounds', map); 

// Sets a listener on a radio button to change the filter type on Places 
// Autocomplete. 

function expandViewportToFitPlace(map, place) { 
    if (place.geometry.viewport) { 
    map.fitBounds(place.geometry.viewport); 
    } else { 
    map.setCenter(place.geometry.location); 
    map.setZoom(17); 
    } 
} 

origin_autocomplete.addListener('place_changed', function() { 
    var place = origin_autocomplete.getPlace(); 
    if (!place.geometry) { 
    window.alert("Autocomplete's returned place contains no geometry"); 
    return; 
    } 
    expandViewportToFitPlace(map, place); 

    // If the place has a geometry, store its place ID and route if we have 
    // the other place ID 
    origin_place_id = place.place_id; 
    route(origin_place_id, destination_place_id, visitarea_place_id, travel_mode, 
     directionsService, directionsDisplay); 
}); 

destination_autocomplete.addListener('place_changed', function() { 
    var place = destination_autocomplete.getPlace(); 
    if (!place.geometry) { 
    window.alert("Autocomplete's returned place contains no geometry"); 
    return; 
    } 
    expandViewportToFitPlace(map, place); 

    // If the place has a geometry, store its place ID and route if we have 
    // the other place ID 
    destination_place_id = place.place_id; 
    route(origin_place_id, destination_place_id, visitarea_place_id, travel_mode, 
     directionsService, directionsDisplay); 
}); 

visitarea_autocomplete.addListener('place_changed', function() { 
    var place = visitarea_autocomplete.getPlace(); 
    if (!place.geometry) { 
    window.alert("Autocomplete's returned place contains no geometry"); 
    return; 
    } 
    expandViewportToFitPlace(map, place); 

    // If the place has a geometry, store its place ID and route if we have 
    // the other place ID 
    visitarea_place_id = place.place_id; 
    route(origin_place_id, destination_place_id, visitarea_place_id, travel_mode, 
     directionsService, directionsDisplay); 
}); 

function route(origin_place_id, destination_place_id, visitarea_place_id, travel_mode, 
       directionsService, directionsDisplay) { 
    if (!origin_place_id || !destination_place_id) { 
    return; 
    } 


    directionsService.route({ 
    origin: {'placeId': origin_place_id}, 
    destination: {'placeId': destination_place_id}, 
    visitarea: {'placeId': visitarea_place_id}, 
    optimizeWaypoints: true, 
    travelMode: travel_mode 
    }, function(response, status) { 
    if (status === google.maps.DirectionsStatus.OK) { 
     directionsDisplay.setDirections(response); 
     var d = response.routes[0].legs[0].distance.text; 
     document.getElementById('km').value = d; 


    } else { 
     window.alert('Directions request failed due to ' + status); 
    } 
    }); 
} 

} 

ウェブフォーム

<form class="uk-form" name="myForm" id="myForm"> 
<input id="pickup" class="controls" name="pickup" type="text"/> 
<input id="dropoff" class="controls" name="dropoff" type="text"/> 
<input id="visitarea" class="controls" name="visitarea" type="text"/>  
<input id="calculatefare" class="calculatefare" type="button" value="Calculate Fare" /> 
</form> 

JavaScript関数ウェブフォームの訪問領域の入力フィールドとJavaScript関数の他のすべての関連するもののために私はすべての訪問領域関連のものを削除する場合は、ピックアンドドロップオフのアドレ私は必要な出力を与えてくれます。

これに関する助力はありますか？

Answer 1

私が気付いたことの1つは、dropoffとvisitareaの変数が同じです。古い値が新しい値に置き換えられます。その場合、値はvisitareaになります。

sampleの方向を確認し、ウェイポイントはウェイポイントを含むルートの方向を取得するためのDirectionsServiceオブジェクトの使用方法を示します。

ルートでウェイポイントを使用する方法の詳細については、documentationを参照してください。

FORM

<div id="map"></div> 
<div id="right-panel"> 
<div> 
<b>Start:</b><input id="pickup" class="controls" name="pickup" type="text"/> 
<br> 
<b>Waypoints:</b> <br> 
<input id="visitarea" class="controls" name="visitarea" type="text"/> 
<br> 
<b>End:</b> 
<input id="dropoff" class="controls" name="dropoff" type="text"/> 
<br> 
    <input type="submit" id="submit"> 
</div> 
<div id="directions-panel"></div> 
</div> 

JAVASCRIPT

function initMap() { 
    var origin_place_id = null; 
    var destination_place_id = null; 
    var visitarea_place_id = null; 

    var directionsService = new google.maps.DirectionsService; 
    var directionsDisplay = new google.maps.DirectionsRenderer; 
    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 6, 
     center: {lat: 41.85, lng: -87.65} 
    }); 

    var pickup = document.getElementById('pickup'); 
    var dropoff = document.getElementById('dropoff'); 
    var visitarea = document.getElementById('visitarea'); 

    var options = { 
    componentRestrictions: {country: 'pk'}//Pakistan only 
    }; 

    var origin_autocomplete = new google.maps.places.Autocomplete(pickup,options); 
    origin_autocomplete.bindTo('bounds', map); 

    var destination_autocomplete = new google.maps.places.Autocomplete(dropoff,options); 
    destination_autocomplete.bindTo('bounds', map); 

    var visitarea_autocomplete = new google.maps.places.Autocomplete(visitarea,options); 
    visitarea_autocomplete.bindTo('bounds', map); 


    directionsDisplay.setMap(map); 

    document.getElementById('submit').addEventListener('click', function() { 
     calculateAndDisplayRoute(directionsService, directionsDisplay, origin_autocomplete, visitarea_autocomplete, destination_autocomplete); 
     console.log(origin_autocomplete.getPlace().formatted_address + " "+ destination_autocomplete.getPlace().formatted_address + " "+ visitarea_autocomplete.getPlace().formatted_address); 
    }); 

    } 

    function calculateAndDisplayRoute(directionsService, directionsDisplay, start, waypoint, end) { 


    var waypts = []; 
     waypts.push({ 
      location: waypoint.getPlace().formatted_address, 
      stopover: true 
     }); 


    directionsService.route({ 
     origin: start.getPlace().formatted_address, 
     destination: end.getPlace().formatted_address, 
     waypoints: waypts, 
     optimizeWaypoints: true, 
     travelMode: 'DRIVING' 
    }, function(response, status) { 
     if (status === 'OK') { 
     directionsDisplay.setDirections(response); 
     var route = response.routes[0]; 
     var summaryPanel = document.getElementById('directions-panel'); 
     summaryPanel.innerHTML = ''; 
     // For each route, display summary information. 
     for (var i = 0; i < route.legs.length; i++) { 
      var routeSegment = i + 1; 
      summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment + 
       '</b><br>'; 
      summaryPanel.innerHTML += route.legs[i].start_address + ' to '; 
      summaryPanel.innerHTML += route.legs[i].end_address + '<br>'; 
      summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>'; 
     } 
     } else { 
     window.alert('Directions request failed due to ' + status); 
     } 
    }); 
    } 

Answer 2

$url = 'https://maps.googleapis.com/maps/api/distancematrix/json?units=imperial&origins=Hyderabad+Telangana+India&destinations=Mumbai+Maharashtra+India'; 
$json = file_get_contents($url); // get the data from Google Maps API 
$result = json_decode($json, true); // convert it from JSON to php array 
$mi = $result['rows'][0]['elements'][0]['distance']['text']; 
$km = $mi*1.60934; 
echo round($km)." KM <br/>"; 
echo $result['rows'][0]['elements'][0]['duration']['text'];