javascript - 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);
解决方案
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);
推荐阅读
- node.js - 为什么 npm i 无法完成安装?为什么它告诉 node 和 npm 是无效命令?
- angularjs - setValidation 时应用角度摘要
- r - 如何在 r 中将 9 列重新排列为 3?
- amazon-web-services - AWS - 地理位置标头 - CloudFront - LambdaEdge - S3 存储桶方案不起作用
- javascript - TypeScript - 类型“布尔”不满足返回布尔值的类型的约束
- teradata - Informatica 并行作业在 Teradata 上创建 mload 问题
- php - 加载资源失败:服务器响应状态为 500 () PHP 网站
- isabelle - 伊莎贝尔理论“变量“返回”仅发生在右手边”
- r - Shiny (R) 中的文本分辨率
- javascript - 如何关闭在 cypress 中浏览网站时可能随时出现的弹出警报?