Javascript 位置搜索为每个搜索重置而不是追加

Question

我有以下输入字段，与 Google 地方信息相关联，因此用户可以选择他们的位置。当他们选择它时，我有一个脚本来计算用户与许多预设目的地的距离。然后返回里程和旅行费用等信息。

目前，每次新的搜索都会附加结果，但是，我需要这样做，以便在位置更改时重置信息。

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

Answer 1

在设置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);