如何实现JavaScript Google地点搜索每次重置结果而非追加

• 现有绑定了Google Places服务的位置输入框，用户选择位置后会自动计算与多个预设目的地的距离，返回里程、差旅费用等信息
• 当前每次新搜索的结果都会追加到已有内容末尾，需要实现位置变更时清空旧结果、仅展示最新计算信息的效果

现有HTML代码 #

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

你当前的代码使用了+=操作符往输出容器追加内容，只要改成覆盖赋值即可，两种可选修改方案：

1. 直接修改输出逻辑：找到calcDistance函数最后一行的输出代码，将+=替换为=，每次新结果就会直接覆盖旧内容
   修改前代码：

outputDiv.innerHTML += closestCities[0].cityName + ' is the closest city. ' + closestCities[0].cityDistance + ' metres away. Total Expenses £' + travelExpenses  + '<br>';

修改后代码：

outputDiv.innerHTML = closestCities[0].cityName + ' is the closest city. ' + closestCities[0].cityDistance + ' metres away. Total Expenses £' + travelExpenses  + '<br>';

2. 如果希望触发位置选择时就立刻清空旧结果（避免接口请求过程中旧内容还留在页面上），可以在calculateDistances函数的开头加入清空输出区域的代码：

function calculateDistances() {
  // 新增这行代码，触发查询时先清空旧结果
  document.getElementById('outputDiv').innerHTML = '';
  destination = document.getElementById('dest').value;
  // 剩余原有代码保持不变
}

内容的提问来源于stack exchange，提问作者Sam Skirrow