Javascript 航路动态距离计算
我想实现一个表单，在其中输入起点和终点，然后通过使用GoogleMapsJavaScriptAPI，它会随着起点和终点值的变化显示距离。下面是我的代码，我可以使用maps API获取地址，但它检查表单填写以计算距离的部分不起作用，我认为问题出在 第87行->$（“#配额表格”）。关于（'input'，dispdist） 下面是我的代码，请告诉我如何修复第87行Javascript 航路动态距离计算,javascript,jquery,html,twitter-bootstrap,Javascript,Jquery,Html,Twitter Bootstrap,我想实现一个表单，在其中输入起点和终点，然后通过使用GoogleMapsJavaScriptAPI，它会随着起点和终点值的变化显示距离。下面是我的代码，我可以使用maps API获取地址，但它检查表单填写以计算距离的部分不起作用，我认为问题出在 第87行->$（“#配额表格”）。关于（'input'，dispdist） 下面是我的代码，请告诉我如何修复第87行 <!DOCTYPE html> <html> <!-- head start --> <hea
<!DOCTYPE html>
<html>
<!-- head start -->
<head>
<!-- styles -->
<style>
.top_margin {
margin-top: 10px;
}
.border {
border-style: inset inset inset inset;
}
</style >
<!-- Scripts -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB03tJHy5QUZ_L3bjn3ehSkFE5QVrcSlLo&libraries=places"></script>
<script>
/* When the document gets ready */
$(document).ready (
function initialize() {
/* Variables */
var origin_input = ''
var destination_input = ''
var prices = {
"choice 1": 10,
"choice 2": 20,
"choice 3": 30,
"choice 4": 40,
"choice 5":50,
"choice 6":60
};
var distance_service = new google.maps.DistanceMatrixService();
var route = {
origins: [],
destinations: [],
travelMode: 'DRIVING',
avoidHighways: false,
unitSystem: google.maps.UnitSystem.IMPERIAL
}
/* Variables */
/* Functions */
// Distance parser
function getorigin() {
origin_input = autocomplete_origin.getPlace().formatted_address;
}
function getdestination() {
destination_input = autocomplete_destination.getPlace().formatted_address;
}
function parse_distance(response, status) {
if (status == 'OK') {
var origins = response.originAddresses;
var destinations = response.destinationAddresses;
for (var i = 0; i < origins.length; i++) {
var results = response.rows[i].elements;
for (var j = 0; j < results.length; j++) {
var element = results[j];
var dist = element.distance.text;
var duration = element.duration.text;
var from = origins[i];
var to = destinations[j];
}
}
$('#distance').text(dist);
}
}
function dispdist() {
/* distance calculation */
route.origins.push(origin_input);
route.destinations.push(destination_input);
distance_service.getDistanceMatrix (route, parse_distance);
}
/* Functions */
/* addresses auto complete initialization */
autocomplete_origin = new google.maps.places.Autocomplete(document.getElementById('origin'));
autocomplete_destination = new google.maps.places.Autocomplete(document.getElementById('destination'));
autocomplete_origin.addListener('place_changed', getorigin);
autocomplete_destination.addListener('place_changed', getdestination);
/* display distance */
$('#quota_form').on('input', dispdist)
});
</script>
</head>
<!-- head end -->
<!--------------------------------------------------------------------------------------------------------------------->
<!-- body start -->
<body>
<div class="container-fluid top_margin">
<form id="quota_form">
<!-- Origin input -->
<div id="q" class="form-group">
<label for="origin">Origin</label>
<input id="origin" type="text" class="form-control" placeholder="Enter origin address">
</div>
<!-- Destination input -->
<div class="form-group">
<label for="destination">Destination</label>
<input id="destination" type="text" class="form-control" placeholder="Enter destination address">
</div>
<div class="form-group">
<!-- Distance output -->
<label>Distance</label>
<output id="distance" form="quota_form" class="border" for="origin destination">Distance Determination</output>
</div>
<!-- Package size choice -->
<label>Package size</label>
<div class="form-group">
<div id="packageSize" class = "btn-group">
<button type = "button" class = "btn btn-default">choice 1</button>
<button type = "button" class = "btn btn-default">choice 2</button>
<button type = "button" class = "btn btn-default">choice 3</button>
<button type = "button" class = "btn btn-default">choice 4</button>
<button type = "button" class = "btn btn-default">choice 5</button>
<button type = "button" class = "btn btn-default">choice 6</button>
</div>
</div>
<!-- Quota Output -->
<div class="form-group">
<label>Quota</label>
<output id="quota" form="quota_form" class="border" for="distance packageSize">Quota Determination</output>
</div>
</form>
</div>
</body>
<!-- body end -->
</html>
.上页边距{
边缘顶部：10px；
}
.边界{
边框样式：插入式插入；
}
/*文件准备好后*/
$（文件）。准备好了吗(
函数初始化（）{
/*变数*/
变量原点_输入=“”
变量目的地_输入=“”
风险价值价格={
“选择1”：10，
“选择2”：20，
“选择3”：30，
“选择4”：40，
“选择5”：50，
“选择6”：60
};
var distance_service=new google.maps.DistanceMatrixService（）；
var路由={
来源：[]，
目的地：[]，
travelMode:‘驾驶’，
避免：错误，
unitSystem:google.maps.unitSystem.IMPERIAL
}
/*变数*/
/*功能*/
//距离分析器
函数getorigin（）{
origin\u input=autocomplete\u origin.getPlace（）。格式化的\u地址；
}
函数getdestination（）{
destination\u input=autocomplete\u destination.getPlace（）。格式化的\u地址；
}
函数解析距离（响应、状态）{
如果（状态=‘正常’）{
var origins=response.originAddresses；
var destinations=response.destinationaddress；
对于（变量i=0；i元素中输入内容时，就会发生此错误。距离不是对象