計算距離並顯示路線谷歌地圖上的航點

我正在網絡應用程序中，我需要添加取貨地址，送客地址和一個訪問區域的數組，通過它用戶將在拾取和下降之間移動地址。我所做的是路線圖，並計算出取車和下車地址之間的距離，但我無法將取車和下車的訪問地點匹配。這裏是我的代碼，如果我任何人都可以給我一個想法如何做到這一點：計算距離並顯示路線谷歌地圖上的航點

Web表單

<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函數

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); 
    } 
    }); 
} 

}

此代碼不能正常工作由於網頁表單中的訪問區域輸入字段以及javascript函數中的所有其他相關內容，但是如果刪除了所有與訪問區域相關的內容，則拾取和下載地址ss工作正常，並給我所需的輸出。

在這方面的任何幫助？

來源

2016-08-16 Bilal Zafar

我注意到一件事，你的變量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); 
     } 
    }); 
    }

來源

2016-08-18 05:21:37

很不錯的！如果您沒有輸入航點，則會發出錯誤，但除此之外，完美地起作用。 –

$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'];

來源

2018-03-09 11:23:38

計算距離並顯示路線谷歌地圖上的航點

回答

相關問題