【发布时间】：2015-05-07 13:10:32
【问题描述】：
我尝试制作一个小型路线规划应用程序。应输入起始地址且目的地是固定的。从给定的起点开始计算最短路线并显示结果。此外，我展示了一个带有 Openlayers 的示例 osm 地图，但我使用 Google Maps API v3 计算它，并将其显示在 1px x 1px 的默认地图中。到目前为止，我的实现工作正常，但出现了一个问题：
如果您单击一次“搜索”，则不会发生任何事情。如果您单击两次，它会执行我想要的操作。有什么解决办法吗？所以这里是主文件的代码：
<?php
//some php code.....
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Home</title>
<meta name="keywords" content="Kletterhallen, Boulderhallen">
<link rel="stylesheet" href="../styles/basic/stylesheet.css" />
<link rel="shortcut icon" href="../styles/basic/favicon.ico" />
<script type="text/JavaScript" src="../js/sha512.js"></script>
<script type="text/JavaScript" src="../js/form.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
/****************************************************
*
* DEFINE DIRECTIONS
*
*****************************************************/
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var place=[];
var dist=[];
var gooco=[];
var neuwaldegg = new google.maps.LatLng(48.237509, 16.285983);
var khWien = new google.maps.LatLng(48.229765, 16.451519);
var oegvKz = new google.maps.LatLng(48.206431, 16.350771);
var ktz = new google.maps.LatLng(48.208769, 16.376707);
var bcedelw = new google.maps.LatLng(48.202942, 16.372778);
var kzsaus = new google.maps.LatLng(48.210542, 16.374989);
var szmarswiese = new google.maps.LatLng(48.239806, 16.276138);
var kzkloster = new google.maps.LatLng(48.310744, 16.327837);
var nwkl = new google.maps.LatLng(48.380266, 16.509789);
var ribpark = new google.maps.LatLng(47.930880, 16.200566);
var boulderbar = new google.maps.LatLng(48.231408, 16.368489);
var dest=[neuwaldegg,khWien,oegvKz,ktz,bcedelw,kzsaus,szmarswiese,kzkloster,nwkl,ribpark,boulderbar];
/****************************************************
*
* INITIALIZE MAP
*
*****************************************************/
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var vienna = new google.maps.LatLng(48.231408, 16.368489);
var mapOptions = {
zoom: 6,
center: vienna
}
map = new google.maps.Map(document.getElementById('routecalc'), mapOptions);
directionsDisplay.setMap(map);
}
/****************************************************
*
* GET POLYLINE OF SHORTEST ROUTES
*
*****************************************************/
function calcRoute(start) {
var start=start.value;
for (var k = 0; k < dest.length; k++) {
var end = dest[k];
var request = {
origin: start,
destination: end,
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.WALKING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var route = response.routes[0];
for (var i = 0; i < route.legs.length; i++) {
startaddress=route.legs[i].start_address;
place.push(route.legs[i].end_address)
var zws=route.legs[i].distance.text;
zws=zws.split(" ");
zws=parseFloat(zws[0]);
dist.push(zws);
gooco.push(route.overview_polyline);
}
}
});
}
var index=[];
var min=[];
for (var j = 0; j < dist.length; j++) {
if(j==0){
min.push(dist[0]);
index.push(0);
}
else if(dist[j]<min[0]){
min=[];
index=[];
min.push(dist[j]);
index.push(j);
}
else if(dist[j]==min[0]){
min.push(dist[j]);
index.push(j);
}
else{
continue;
}
}
var summaryPanel = document.getElementById('directions_panel');
summaryPanel.innerHTML = '';
summaryPanel.innerHTML += '<b>Your search results:</b><br>';
for (var t = 0; t < index.length; t++) {
summaryPanel.innerHTML += 'Your entered adress: '+startaddress+ '<br>';
summaryPanel.innerHTML += 'Your entered destination: '+place[index[t]]+ '<br>';
summaryPanel.innerHTML += 'Distance: '+dist[index[t]]+' km'+ '<br><br>';
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="routecalc">
</div>
<!-- HEADER -->
<div id="Header">
<img id="Logo" src="../styles/basic/Logo.gif" alt="Logo">
<img id="Headline" src="../styles/basic/Headline.gif" alt="Headline">
<a href="normalview.php"><img id="German" src="../styles/basic/german.png"></a>
<a href="normalview.php"><img id="English" src="../styles/basic/english.gif"></a>
</div>
<!-- MAP-->
<iframe id="Map" src="map/map.html">
<a href="map/map.html">OSM Maps</a>
</iframe>
<!-- SEARCH -->
<form id="Search" action="" method="post" name="form">
<p>Nächstgelegene Halle von
<input name="start" type="text" size="20" maxlength="30"/>
<input type="button"
value="Search"
onclick="calcRoute(this.form.start);" />
</p>
</form>
<!--SEARCH RESULTS-->
<div id="directions_panel"></div>
<!-- FOOTER -->
</body>
</html>
我认为这与问题无关，但这里也是map.html的代码：
<html><body>
<div id="mapdiv"></div>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script>
map = new OpenLayers.Map("mapdiv");
map.addLayer(new OpenLayers.Layer.OSM());
var lonLat = new OpenLayers.LonLat(16.367639,48.1986347)
.transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
);
var zoom=12;
map.setCenter (lonLat, zoom);
</script>
</body></html>
如果您需要任何进一步的信息，请告诉我。提前非常感谢。
向你问好
【问题讨论】：
标签： javascript google-maps-api-3 directions