рассчитать расстояние и показать маршрут на карте google с путевыми точками

Question

Я работаю над веб-приложением, в котором мне нужно добавить адрес пикапа, выпадающий адрес и массив области посещения, через которые пользователь будет перемещаться между пикапом и вылетом адрес. То, что я сделал, маршрутизирует карту и вычисляет расстояние между пикапом и адресом вылета, но я не могу сопоставить области посещения с пикапом и высадкой. Вот мой код, если я кто-нибудь может дать мне представление о том, как это сделать:

веб-форма

<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-функции, но если я удалю все связанные с посещением вещи, выбор и выпадение addre ss отлично работает и дает мне требуемый результат.

Любая помощь в этом?

Answer 1

Одна вещь, которую я замечаю, ваша переменная для ваших dropoff и visitarea такая же. Он заменит старое значение на более новое, в вашем случае значением будет visitarea.

Просьба проверить sample для направления и путевых точек, демонстрируя использование объекта DirectionsService для извлечения маршрутов для маршрута, включая путевые точки.

Прочтите documentation для получения дополнительной информации об использовании путевых точек в маршрутах.

Вот фрагмент образца с некоторыми из вашего кода:

ФОРМА

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