0

我对编码很陌生，正在创建一个在线系统。系统的一部分我包含了谷歌距离矩阵 API，它是 JavaScript，而我的大部分其他代码是 HTML 或 PHP。不幸的是，我需要将距离（用 JavaScript 计算）放在我的 PHP 代码中，以便我可以使用它。我读到我可以使用 AJAX？我不太确定自己在做什么，但我试了一下。

在包含谷歌地图的页面之前，有一个表格。这意味着我必须使用 SESSION 变量将数据从 Google 页面之前的页面移动到 Google 页面之后的两个页面。这也是我的 Google 脚本获取它的两个位置以找到它们之间的距离的地方。我认为这一切都很好。

谷歌页面上的 PHP：

$date = $_POST['date'];
$time = $_POST['time'];
$length = $_POST['length'];
$numberofpeople = $_POST['numberofpeople'];
$useofbus = $_POST['useofbus'];

session_start();
$_SESSION['time'] = $time;
$_SESSION['date'] = $date;
$_SESSION['length'] = $length;
$_SESSION['numberofpeople'] = $numberofpeople;
$_SESSION['pickuplocation'] = $pickuplocation;
$_SESSION['destination'] = $destination;
$_SESSION['useofbus'] = $useofbus;


$pickuplocation = $_POST['pickuplocation'];
$destination = $_POST['destination'];

Google 页面上的 HTML：

</head>
<body onload="initialize()">
<div id="inputs">
  <pre class="prettyprint">
   </pre>
<form name="google" action="thirdform.php">
<table summary="google">


  <tr>
<td>&nbsp;</td>
<td><input name="Continue" value="Continue" type="submit" ></td>
<td>&nbsp;</td>
</tr> 

</table>
</form> 
</div>
<div id="outputDiv"></div>
<div id="map"></div>
</body>
</html>

除了 AJAX 之外，我不会发布 Google Matrix 的 JavaScript：

var distance = results[j].distance.text;
$.get("thirdform.php", {miles:distance} );

我不确定上面的代码是否正确，我猜我在某个地方出错了，可能在这里。在下一页，（thirdform.php）PHP：

session_start();
$time = $_SESSION['time'];
$date = $_SESSION['date'];
$length = $_SESSION['length'];
$numberofpeople = $_SESSION['numberofpeople'];
$pickuplocation = $_SESSION['pickuplocation'];
$destination = $_SESSION['destination'];
$useofbus = $_SESSION['useofbus'];

var_dump($_SESSION);

echo "</br>";
$distance = $_GET['miles'];

echo "DISTANCE: " . $distance . "</br>";

我无法在 PHP 变量 $distance 中得到任何东西——它是空的。我编码不正确吗？我从该网站的某个地方在线跟踪了一个声称可以工作的示例。我已经阅读了几篇文章并在谷歌和这个网站上进行了搜索，但似乎在任何不太复杂且与我正在尝试做的事情相关的地方都没有明确的答案。我已经阅读了很多示例，但它们都太复杂了，我无法使用和更改以放入我的代码中。我阅读了一些代码，页面被直接发送到下一页，但是我需要在我的页面上显示谷歌地图，因此需要使用按钮移动到下一页。

谁能给我一个正确的方向？谢谢。

JS：

<script>

  var map;
  var geocoder;
  var bounds = new google.maps.LatLngBounds();
  var markersArray = [];

  var origin = '<?php echo $pickuplocation; ?>';
  var destination = '<?php echo $destination; ?>';



  var destinationIcon = 'https://chart.googleapis.com/chart? chst=d_map_pin_letter&chld=D|FF0000|000000';
  var originIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=O|FFFF00|000000';

  function initialize() {
    var opts = {
      center: new google.maps.LatLng(55.53, 9.4),
      zoom: 12,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map'), opts);
    geocoder = new google.maps.Geocoder();
    calculateDistances()
  }

  function calculateDistances() {
    var service = new google.maps.DistanceMatrixService();
    service.getDistanceMatrix(
      {
        origins: [origin],
        destinations: [destination],
        travelMode: google.maps.TravelMode.DRIVING,
        unitSystem: google.maps.UnitSystem.IMPERIAL,
        avoidHighways: false,
        avoidTolls: false
      }, callback);
  }

  function callback(response, status) {
    if (status != google.maps.DistanceMatrixStatus.OK) {
      alert('Error was: ' + status);
    } else {
      var origins = response.originAddresses;
      var destinations = response.destinationAddresses;
      var outputDiv = document.getElementById('outputDiv');
      outputDiv.innerHTML = '';
      deleteOverlays();

      for (var i = 0; i < origins.length; i++) {
        var results = response.rows[i].elements;

        addMarker(origins[i], false);
        for (var j = 0; j < results.length; j++) {
          addMarker(destinations[j], true);
          outputDiv.innerHTML += origins[i] + ' to ' + destinations[j]
              + ': ' + results[j].distance.text + ' in '
              + results[j].duration.text + '<br>';
        }
      } 
    }
  }

  function addMarker(location, isDestination) {
    var icon;
    if (isDestination) {
      icon = destinationIcon;
    } else {
      icon = originIcon;
    }
    geocoder.geocode({'address': location}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        bounds.extend(results[0].geometry.location);
        map.fitBounds(bounds);
        var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location,
          icon: icon
        });
        markersArray.push(marker);
      } else {
        alert('Geocode was not successful for the following reason: '
          + status);
      }
    });
  }

  function deleteOverlays() {
    if (markersArray) {
      for (i in markersArray) {
        markersArray[i].setMap(null);
      }
      markersArray.length = 0;
    }
  }


  </script>

  <script type="text/javascript">

  var distance = results[j].distance.text;

  $('.button-class').click(function() { $.get("thirdform.php", {miles:distance},   function (data){alert(data)} ); });






</script>
4

1 回答 1

0

Since you are overriding the form action with the $.get, try removing the form and using a <button> instead of an <input> button.

Then have your ajax request run on that <button>.

Edit: It's also worth noting that you should probably just send data from the php file. You can then do any other manipulation("DISTANCE: ", "<br />") in the html/js.

于 2013-01-28T19:35:46.763 回答