1

私は、ピックアップアドレス、ドロップオフアドレス、およびユーザーがピックアップアドレスとドロップオフアドレスの間を移動する訪問エリアの配列を追加する必要がある 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);
    }
  });
}

 }

このコードは、Web フォームの訪問エリア入力フィールドと JavaScript 関数の他のすべての関連項目のために機能していませんが、訪問エリアに関連するすべてのものを削除すると、ピック アンド ドロップオフ アドレスが正常に機能し、必要な出力が得られます。 .

これで何か助けはありますか？

4

2 に答える 2