Fatal编程技术网

Javascript 路线规划需要双击

javascript google-maps-api-3

Javascript 路线规划需要双击,javascript,google-maps-api-3,directions,Javascript,Google Maps Api 3,Directions,我尝试制作一个小型的路线规划应用程序。应该输入起始地址，并且目的地是固定的。从给定的起点开始计算最短路线，并给出结果。此外，我还提供了一个带有Openlayers的osm映射示例，但我使用GoogleMapsAPIv3进行了计算，并将其显示在默认映射1px 1px中。到目前为止，我的实现工作正常，但出现了一个问题： 如果你点击一次“搜索”，什么都不会发生。如果你点击两次，它会做我想要的。有什么解决办法吗？下面是主文件的代码： <?php //some php code..... ?&g

我尝试制作一个小型的路线规划应用程序。应该输入起始地址，并且目的地是固定的。从给定的起点开始计算最短路线，并给出结果。此外，我还提供了一个带有Openlayers的osm映射示例，但我使用GoogleMapsAPIv3进行了计算，并将其显示在默认映射1px 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&auml;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>


家
/**************************************************** 
*
*确定方向
*
*****************************************************/
var方向显示；
var directionsService=new google.maps.directionsService（）；
var映射；
var-place=[]；
var-dist=[]；
var gooco=[]；
var neuwaldegg=newgoogle.maps.LatLng（48.237509,16.285983）；
var khWien=new google.maps.LatLng（48.229765,16.451519）；
var oegvKz=新的google.maps.LatLng（48.206431,16.350771）；
var ktz=newgoogle.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=新的google.maps.LatLng（48.239806,16.276138）；
var kzkloster=new google.maps.LatLng（48.310744,16.327837）；
var nwkl=新的google.maps.LatLng（48.380266,16.509789）；
var ribbark=newgoogle.maps.LatLng（47.93088016.200566）；
var boulderbar=newgoogle.maps.LatLng（48.231408,16.368489）；
var dest=[neuwaldegg、khWien、oegvKz、ktz、bcedelw、kzsaus、szmarswiese、kzkloster、nwkl、Ribbark、boulderbar]；
/**************************************************** 
*
*初始化映射
*
*****************************************************/
函数初始化（）{
directionsDisplay=new google.maps.DirectionsRenderer（）；
var vienna=新的google.maps.LatLng（48.231408,16.368489）；
变量映射选项={
缩放：6，
中心：维也纳
}
map=new google.maps.map（document.getElementById（'routecalc'），mapOptions）；
方向显示.setMap（地图）；
}
/**************************************************** 
*
*获取最短路径的多段线
*
*****************************************************/
功能计算器（启动）{
var start=start.value；
对于（变量k=0；k
我认为这与问题无关，但下面是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>


map=新的OpenLayers.map（“mapdiv”）；
addLayer（新的OpenLayers.Layer.OSM（））；
var lonLat=新OpenLayers.lonLat（16.367639,48.1986347）
.变换(
新OpenLayers.投影（“EPSG:4326”），
map.getProjectionObject（）文件
);
var=12；
map.setCenter（lonLat，zoom）；
如果您需要任何进一步的信息，请让我知道。提前感谢

Helets clax

我自己能够解决这个问题，希望我能帮助别人解决问题。我使用了Google Maps API DirectionMatrix，它比DirectionService更适合。下面是代码：

<?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="http://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
 <script>


/**************************************************** 
*
*                 DEFINE DIRECTIONS 
*
*****************************************************/

function initialize() {
  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);
   geocoder = new google.maps.Geocoder();
}
function calculateDistances(originstr) {
var map;
var geocoder;
var start=[];
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];

  start.push(originstr.value);
  var service = new google.maps.DistanceMatrixService();
  service.getDistanceMatrix(
    {
      origins: start,
      destinations: dest,
      travelMode: google.maps.TravelMode.WALKING,
      unitSystem: google.maps.UnitSystem.METRIC,
      avoidHighways: false,
      avoidTolls: false
    }, callback);
}

function callback(response, status) {
  var dist=[];
  if (status != google.maps.DistanceMatrixStatus.OK) {
    alert('Error was: ' + status);
  } else {
    var origins = response.originAddresses;
    var destinations = response.destinationAddresses;
    var outputDiv = document.getElementById('directions_panel');
    outputDiv.innerHTML = '';
var results = response.rows[0].elements;
      for (var k = 0; k < results.length; k++) {
        var zws=results[k].distance.text;
        zws=zws.split(" ");
        zws=parseFloat(zws[0]);
        dist.push(zws);
      }
      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;
}
}

for (var l = 0; l < index.length; l++) {
        outputDiv.innerHTML += 'Your entered adress: '+origins[0]+ '<br>';
        outputDiv.innerHTML += 'Your destination: '+destinations[index[l]]+ '<br>';
        outputDiv.innerHTML += 'Distance: '+results[index[l]].distance.text+'<br>';
        outputDiv.innerHTML += 'Estimated Time: '+results[index[l]].duration.text+'<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&auml;chstgelegene Halle von 
    <input name="start" type="text" size="20" maxlength="30"/> 
    <input type="button" 
                   value="Search" 
                  onclick="calculateDistances(this.form.start);" /> 
  </p>
 </form>
 <!--SEARCH RESULTS-->

 <!-- FOOTER -->

 <div id="directions_panel"></div>

 </body>
</html>


家
/**************************************************** 
*
*确定方向
*
*****************************************************/
函数初始化（）{
var vienna=新的google.maps.LatLng（48.231408,16.368489）；
变量映射选项={
缩放：6，
中心：维也纳
}
map=new google.maps.map（document.getElementById（'routecalc'），mapOptions）；
geocoder=新的google.maps.geocoder（）；
}
函数计算实例（originstr）{
var映射；
var地理编码器；
var start=[]；
var gooco=[]；
var neuwaldegg=newgoogle.maps.LatLng（48.237509,16.285983）；
var khWien=new google.maps.LatLng（48.229765,16.451519）；
var oegvKz=新的google.maps.LatLng（48.206431,16.350771）；
var ktz=newgoogle.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=新的google.maps.LatLng（48.239806,16.276138）；
var kzkloster=new google.maps.LatLng（48.310744,16.327837）；
var nwkl=新的google.maps.LatLng（48.380266,16.509789）；
var ribbark=newgoogle.maps.LatLng（47.93088016.200566）；
var boulderbar=newgoogle.maps.LatLng（48.231408,16.368489）；
var dest=[neuwaldegg、khWien、oegvKz、ktz、bcedelw、kzsaus、szmarswiese、kzkloster、nwkl、Ribbark、boulderbar]；
启动推送（初始值）；
var service=new google.maps.DistanceMatrixService（）；
service.getDistanceMatrix(
{
起源：开始，
目的地：目的地，
travelMode:google.maps.travelMode.WALKING，
unitSystem:google.maps.unitSystem.METRIC，
避免：错误，
避免收费：错误
}，回调）；
}
函数回调（响应、状态）{
var-dist=[]；
if（status！=google.maps.DistanceMatrixStatus.OK）{
警报（“错误为：”+状态）；
}埃尔斯