為每次搜索重置Javascript位置搜索而不是追加

我有以下輸入欄位，與 Google Places 相關聯，以便用戶可以選擇他們的位置。當他們選擇它時，我有一個腳本來計算用戶離多個預設目的地的距離。然后回傳諸如里程和旅行費用之類的資訊。

目前，每個新搜索都會附加結果，但是，我需要這樣做，以便在位置更改時重置資訊。

<label>Location
  <input type="text" name="dest" id="dest" value=""/>
</label>
<div id="outputDiv"></div>

我的JS如下：

var origin;
var destination;

function initialize() {
  var input = document.getElementById('dest');
  autocomplete = new google.maps.places.Autocomplete(input);
  google.maps.event.addListener(autocomplete, 'place_changed', calculateDistances);

}
function calculateDistances() {
  destination = document.getElementById('dest').value;
  var service = new google.maps.DistanceMatrixService();
  service.getDistanceMatrix(
    {
      origins: ["Tamworth, UK", "Margate, UK", "Brighton, UK", "Bristol, UK", "Birmingham, UK", "Coventry, UK"],
      destinations: [destination],
      travelMode: google.maps.TravelMode.DRIVING,
      unitSystem: google.maps.UnitSystem.IMPERIAL,
      avoidHighways: false,
      avoidTolls: false
    }, calcDistance);
}

function calcDistance(response, status) {
  if (status != google.maps.DistanceMatrixStatus.OK) {
    alert('Error was: '   status);
  } else {
    var origins = response.originAddresses;
    var destinations = response.destinationAddresses;

    const closestCities = [];
    for (var i = 0; i < origins.length; i  ) {
      var results = response.rows[i].elements;

      for (let j = 0; j < results.length; j  ) {
        // If distance is less than 30 miles (48280 metres)
        //if(results[j].distance.value < 48280) {
      const closestCitiesDist = results[j].distance.value
      const closestCitiesName = origins[i]

      closestCities.push({"cityName" : closestCitiesName, "cityDistance" : closestCitiesDist});
    //}
  }
}
//console.log(closestCities)
for (let i = closestCities.length - 1; i > 0; i--) {
  if (closestCities[i].cityDistance < closestCities[i - 1].cityDistance) {
    temp = closestCities[i - 1];
    closestCities[i - 1] = closestCities[i];
    closestCities[i] = temp;
  }
}
// If the closest city is within 30 miles
if(closestCities[0].cityDistance < 48280) {
// list tranvel expenses for all cities here
let expenses = {
  "Margate, UK": 10,
  "Bristol, UK": 20,
  "Coventry, UK": 30,
  "Tamworth, UK": 40,
  "Birmingham, UK": 50,
  "Brighton, UK": 60
}
if(expenses[closestCities[0].cityName]!==undefined)
  travelExpenses  = expenses[closestCities[0].cityName]
else
// FALLBACK: amount if client is within 30 miles of a destination city, but no price is added to the backend
travelExpenses = 35;

} else {
  // if client is not within 30 miles of a destination city, flat fee
  travelExpenses = 100;
  console.log('no cities nearby');
}
console.log(travelExpenses)
outputDiv.innerHTML  = closestCities[0].cityName   ' is the closest city. '   
closestCities[0].cityDistance
          ' metres away. Total Expenses ￡'   travelExpenses    '<br>';

  }
}

google.maps.event.addDomListener(window, 'load', initialize);

uj5u.com熱心網友回復：

在設定outputDiv的innerHTML時使用賦值運算子而不是加法賦值運算子。

你的 JS 應該是：

var origin;
var destination;

function initialize() {
  var input = document.getElementById('dest');
  autocomplete = new google.maps.places.Autocomplete(input);
  google.maps.event.addListener(autocomplete, 'place_changed', calculateDistances);

}
function calculateDistances() {
  destination = document.getElementById('dest').value;
  var service = new google.maps.DistanceMatrixService();
  service.getDistanceMatrix(
    {
      origins: ["Tamworth, UK", "Margate, UK", "Brighton, UK", "Bristol, UK", "Birmingham, UK", "Coventry, UK"],
      destinations: [destination],
      travelMode: google.maps.TravelMode.DRIVING,
      unitSystem: google.maps.UnitSystem.IMPERIAL,
      avoidHighways: false,
      avoidTolls: false
    }, calcDistance);
}

function calcDistance(response, status) {
  if (status != google.maps.DistanceMatrixStatus.OK) {
    alert('Error was: '   status);
  } else {
    var origins = response.originAddresses;
    var destinations = response.destinationAddresses;

    const closestCities = [];
    for (var i = 0; i < origins.length; i  ) {
      var results = response.rows[i].elements;

      for (let j = 0; j < results.length; j  ) {
        // If distance is less than 30 miles (48280 metres)
        //if(results[j].distance.value < 48280) {
      const closestCitiesDist = results[j].distance.value
      const closestCitiesName = origins[i]

      closestCities.push({"cityName" : closestCitiesName, "cityDistance" : closestCitiesDist});
    //}
  }
}
//console.log(closestCities)
for (let i = closestCities.length - 1; i > 0; i--) {
  if (closestCities[i].cityDistance < closestCities[i - 1].cityDistance) {
    temp = closestCities[i - 1];
    closestCities[i - 1] = closestCities[i];
    closestCities[i] = temp;
  }
}
// If the closest city is within 30 miles
if(closestCities[0].cityDistance < 48280) {
// list tranvel expenses for all cities here
let expenses = {
  "Margate, UK": 10,
  "Bristol, UK": 20,
  "Coventry, UK": 30,
  "Tamworth, UK": 40,
  "Birmingham, UK": 50,
  "Brighton, UK": 60
}
if(expenses[closestCities[0].cityName]!==undefined)
  travelExpenses  = expenses[closestCities[0].cityName]
else
// FALLBACK: amount if client is within 30 miles of a destination city, but no price is added to the backend
travelExpenses = 35;

} else {
  // if client is not within 30 miles of a destination city, flat fee
  travelExpenses = 100;
  console.log('no cities nearby');
}
console.log(travelExpenses)
outputDiv.innerHTML = closestCities[0].cityName   ' is the closest city. '   
closestCities[0].cityDistance
          ' metres away. Total Expenses ￡'   travelExpenses    '<br>'; //changed line

  }
}

google.maps.event.addDomListener(window, 'load', initialize);

標籤：javascript 形式 重启

上一篇：如何在Azure門戶中為AzureLinuxFunctions使用自定義映像？

下一篇：在php中提交表單后會話丟失其資料或值