用變數設定谷歌原始搜索框地址-有解無憂

我正在嘗試使 origin SearchBox 目的地成為具有合法方向的字串，但是當我這樣做時，我仍然需要選擇第一個選項才能使其作業（計算距離）。

得到這個搜索來計算 2 點之間的距離，它完美地作業：用變數設定谷歌原始搜索框地址

但是發生的事情是我仍然必須單擊原點搜索框然后列出所有可能的位置，在我的情況下是第一個，我怎樣才能使地圖自動選擇第一個選項或識別設定的地址輸入值？

    <script>

   function initMap() {
   var map = new google.maps.Map(document.getElementById('map-canvas'), {
  center: {
  lat: 9.0271554,
   lng: 79.4816371
         },
         zoom: 15
        });

     var marker = new google.maps.Marker({
     map: map,
     draggable: false
   });


      if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
  initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  map.setCenter(initialLocation);
         /*marker.setPosition(initialLocation);         */
         });
        }

      new AutocompleteDirectionsHandler(map);
      }

       /**
       * @constructor
       */
       function AutocompleteDirectionsHandler(map) {
       this.map = map;
       this.originPlaceId = null;
         this.destinationPlaceId = null;
         this.travelMode = 'DRIVING';
      this.avoidTolls = true;
        this.avoidHighways= true;
          //this.provideRouteAlternatives= true,
          this.avoidFerries= true;
        this.directionsService = new google.maps.DirectionsService();
       this.directionsRenderer = new google.maps.DirectionsRenderer();
           this.directionsRenderer.setMap(map);

              var originInput = document.getElementById('orign');
           var destinationInput = document.getElementById('destn');

            var originAutocomplete = new google.maps.places.SearchBox(originInput);

          var destinationAutocomplete =
           new google.maps.places.SearchBox(destinationInput);

        this.setupPlaceChangedListener(originAutocomplete, 'ORIG');
        this.setupPlaceChangedListener(destinationAutocomplete, 'DEST');

          }

          AutocompleteDirectionsHandler.prototype.setupPlaceChangedListener = function(
          autocomplete, mode) {
       var me = this;
       autocomplete.bindTo('bounds', this.map);

       autocomplete.addListener('places_changed', function() {
     var places = autocomplete.getPlaces();
         var place = places[0];

    if (!place.place_id) {
    window.alert('Please select an option from the dropdown list.');
  return;
     }
       if (mode === 'ORIG') {
         me.originPlaceId = place.place_id;
      } else {
        me.destinationPlaceId = place.place_id;
        }
        me.route();
       });
      };

          AutocompleteDirectionsHandler.prototype.route = function() {
    if (!this.originPlaceId || !this.destinationPlaceId) {
      return;
  }
     var me = this;

     this.directionsService.route({
  origin: {
    'placeId': this.originPlaceId
  },
  destination: {
    'placeId': this.destinationPlaceId
  },
  travelMode: this.travelMode,
  avoidTolls: this.avoidTolls
   },
   function(response, status) {
  if (status === 'OK') {
    me.directionsRenderer.setDirections(response);
    computeTotalDistance(response);
  } else {
    window.alert('Directions request failed due to '   status);
  }
    });
    };
    // from Google Maps API: Total distance with waypoints
   // https://stackoverflow.com/questions/12802202/google-maps-api-total-distance-with-waypoints
    function computeTotalDistance(result) {
     var totalDist = 0;
    var totalTime = 0;
    var myroute = result.routes[0];
     for (i = 0; i < myroute.legs.length; i  ) {
     totalDist  = myroute.legs[i].distance.value;
      totalTime  = myroute.legs[i].duration.value;
      }
       totalDist = totalDist / 1000.
      time = (totalTime / 60).toFixed(2)

  document.getElementById("totalkm").innerHTML =""   totalDist   "km" ;
  document.getElementById("totaltime").innerHTML =""   time    " minutos";

 if(totalDist <= 5){
   document.getElementById("totalCost").innerHTML =" $3.50";
  }

 else{
 kmPrice = (totalDist - 5) * 0.75;
 document.getElementById("totalCost").innerHTML ="$"  (kmPrice   3.50).toFixed(2)  "";

     }
    }

   function send_handle(){
   let name=document.getElementById("name").value;
 ///let lastname= document.getElementById("lastname").value;
 let inst= document.getElementById("instructions").value;
 let origin= document.querySelector(".selectButtons input#orign").value;
let destination= document.querySelector(".selectButtons input#destn").value;
let cost= document.getElementById("totalCost").innerHTML;
let distance= document.getElementById("totalkm").innerHTML;
    // win.focus();
     }
    </script>


           
    <html>
   <div class="selectButtons" >
   <input type="text" id="orign" placeholder="origen">
   <input type="text" id="destn" placeholder="destino">
   <span> Distancia en KM <div id="totalkm">0km</div> </span>
   <span> Distancia en tiempo <div id="totaltime">o.oo</div> </span>
   <span> costo por envio<div id="totalCost">$0</div></div> </span>
   </div>
   </html>

uj5u.com熱心網友回復：

您可以呼叫位置服務來獲取 PlaceId（使用您的字串），然后將該 placeId 傳遞給您的建構式，AutocompleteDirectionsHandler或者如果您已經擁有PlaceId（您可以存盤這些），只需使用它，盡管您可能想要初始化帶有字串的原始輸入。

  var origin = "Allbrook, Panama";
  var originInput = document.getElementById('orign');
  originInput.value = origin;
  const request = {
    query: origin,
    fields: ["name", "geometry", "place_id"],
  };
  var originPlaceId;
  var service = new google.maps.places.PlacesService(map);
  service.findPlaceFromQuery(request, (results, status) => {
    if (status === google.maps.places.PlacesServiceStatus.OK && results) {
      originPlaceId = results[0].place_id;
      console.log("placeId=" originPlaceId " coords=" results[0].geometry.location.toUrlValue(6));
      new AutocompleteDirectionsHandler(map, originPlaceId);
      map.setCenter(results[0].geometry.location);
    }
  });

將初始 origin placeId 添加到AutocompleteDirectionsHandler建構式：

function AutocompleteDirectionsHandler(map, originPlaceId) {
  this.map = map;
  this.originPlaceId = originPlaceId;
  // ...

負載： 用變數設定谷歌原始搜索框地址

從下拉串列中選擇目的地后： 用變數設定谷歌原始搜索框地址

代碼片段：

let map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: {
      lat: 9.0271554,
      lng: 79.4816371
    },
    zoom: 15
  });

  var origin = "Allbrook, Panama";
  var originInput = document.getElementById('orign');
  originInput.value = origin;
  const request = {
    query: origin,
    fields: ["name", "geometry", "place_id"],
  };
  var originPlaceId;
  var service = new google.maps.places.PlacesService(map);
  service.findPlaceFromQuery(request, (results, status) => {
    if (status === google.maps.places.PlacesServiceStatus.OK && results) {
      originPlaceId = results[0].place_id;
      console.log("placeId=" originPlaceId " coords=" results[0].geometry.location.toUrlValue(6));
      new AutocompleteDirectionsHandler(map, originPlaceId);
      map.setCenter(results[0].geometry.location);
    }
  });

  var marker = new google.maps.Marker({
    map: map,
    draggable: false
  });


  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
      map.setCenter(initialLocation);
      /*marker.setPosition(initialLocation);         */
    });
  }
}

/**
 * @constructor
 */
function AutocompleteDirectionsHandler(map, originPlaceId) {
  this.map = map;
  this.originPlaceId = originPlaceId;
  this.destinationPlaceId = null;
  this.travelMode = 'DRIVING';
  this.avoidTolls = true;
  this.avoidHighways = true;
  //this.provideRouteAlternatives= true,
  this.avoidFerries = true;
  this.directionsService = new google.maps.DirectionsService();
  this.directionsRenderer = new google.maps.DirectionsRenderer();
  this.directionsRenderer.setMap(map);

  var originInput = document.getElementById('orign');
  var destinationInput = document.getElementById('destn');

  var originAutocomplete = new google.maps.places.SearchBox(originInput);

  var destinationAutocomplete =
    new google.maps.places.SearchBox(destinationInput);

  this.setupPlaceChangedListener(originAutocomplete, 'ORIG');
  this.setupPlaceChangedListener(destinationAutocomplete, 'DEST');

}

AutocompleteDirectionsHandler.prototype.setupPlaceChangedListener = function(
  autocomplete, mode) {
  var me = this;
  autocomplete.bindTo('bounds', this.map);

  autocomplete.addListener('places_changed', function() {
    var places = autocomplete.getPlaces();
    var place = places[0];

    if (!place.place_id) {
      window.alert('Please select an option from the dropdown list.');
      return;
    }
    if (mode === 'ORIG') {
      me.originPlaceId = place.place_id;
    } else {
      me.destinationPlaceId = place.place_id;
    }
    me.route();
  });
};

AutocompleteDirectionsHandler.prototype.route = function() {
  if (!this.originPlaceId || !this.destinationPlaceId) {
    return;
  }
  var me = this;

  this.directionsService.route({
      origin: {
        'placeId': this.originPlaceId
      },
      destination: {
        'placeId': this.destinationPlaceId
      },
      travelMode: this.travelMode,
      avoidTolls: this.avoidTolls
    },
    function(response, status) {
      if (status === 'OK') {
        me.directionsRenderer.setDirections(response);
        computeTotalDistance(response);
      } else {
        window.alert('Directions request failed due to '   status);
      }
    });
};
// from Google Maps API: Total distance with waypoints
// https://stackoverflow.com/questions/12802202/google-maps-api-total-distance-with-waypoints
function computeTotalDistance(result) {
  var totalDist = 0;
  var totalTime = 0;
  var myroute = result.routes[0];
  for (i = 0; i < myroute.legs.length; i  ) {
    totalDist  = myroute.legs[i].distance.value;
    totalTime  = myroute.legs[i].duration.value;
  }
  totalDist = totalDist / 1000.
  time = (totalTime / 60).toFixed(2)

  document.getElementById("totalkm").innerHTML = ""   totalDist   "km";
  document.getElementById("totaltime").innerHTML = ""   time   " minutos";

  if (totalDist <= 5) {
    document.getElementById("totalCost").innerHTML = " $3.50";
  } else {
    kmPrice = (totalDist - 5) * 0.75;
    document.getElementById("totalCost").innerHTML = "$"   (kmPrice   3.50).toFixed(2)   "";

  }
}

function send_handle() {
  let name = document.getElementById("name").value;
  ///let lastname= document.getElementById("lastname").value;
  let inst = document.getElementById("instructions").value;
  let origin = document.querySelector(".selectButtons input#orign").value;
  let destination = document.querySelector(".selectButtons input#destn").value;
  let cost = document.getElementById("totalCost").innerHTML;
  let distance = document.getElementById("totalkm").innerHTML;
  // win.focus();
}


function createMarker(place) {
  if (!place.geometry || !place.geometry.location) return;

  const marker = new google.maps.Marker({
    map,
    position: place.geometry.location,
  });

  google.maps.event.addListener(marker, "click", () => {
    infowindow.setContent(place.name || "");
    infowindow.open(map);
  });
}

window.initMap = initMap;

#map-canvas {
  height: 80%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<html>
<div class="selectButtons">
  <input type="text" id="orign" placeholder="origen" />
  <input type="text" id="destn" placeholder="destino" />
  <span> Distancia en KM <div id="totalkm">0km</div> </span>
  <span> Distancia en tiempo <div id="totaltime">o.oo</div> </span>
  <span> costo por envio<div id="totalCost">$0</div> </span>
</div>
<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initMap" async defer></script>

</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/514741.html

標籤：javascripthtml谷歌地图谷歌地图 api-3

上一篇：在沒有Evergreen運行時的情況下發布WebView2（以使用Google地圖）的最佳方式是什么？

下一篇：洗掉谷歌地圖示簽