0

私はコーディングが初めてで、オンラインシステムを作成しています。システムの一部には、JavaScript である Google Distance Matrix API が含まれていますが、他のほとんどのコードは HTML または PHP です。残念ながら、距離 (JavaScript で計算されます) を PHP コードに含める必要があるため、それをいじることができます。私はAJAXを使用できると読みましたか?自分が何をしているのかよくわかりませんが、やってみました。

Google マップを含むページの前に、フォームがあります。これは、SESSION 変数を使用して、Google ページの前のページから Google ページの 2 ページ後にデータを移動する必要があることを意味します。これは、Google スクリプトが 2 つの場所を取得して距離を見つける場所でもあります。これはすべてうまくいくと思います。

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 マトリックスの 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 で何も取得できません - 空です。コーディングが間違っていますか? 私は、このウェブサイトのどこかで動作すると主張するオンラインの例に従いました。私はいくつかの記事を読み、Google とこの Web サイトで検索しましたが、複雑すぎず、私がやろうとしていることに関連する明確な答えはどこにもないようです。私はたくさんの例を読みましたが、それらはすべて非常に複雑すぎて、使用したり変更したりしてコードに入れることができません。ページが次のページに直接送信されるコードがいくつかありましたが、ページに Google マップを表示する必要があるため、ボタンを使用して次のページに移動する必要があります。

誰かが私に正しい方向への微調整を与えることができますか? ありがとう。

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

フォーム アクションを でオーバーライドしているため$.get、フォームを削除して<button>、ボタンの代わりに を使用してみてください<input>

次に、その上で ajax リクエストを実行し<button>ます。

編集:おそらくphpファイルからデータを送信する必要があることにも注意してください。<br />その後、html/js で他の操作 ("DISTANCE: ", " ") を実行できます。

于 2013-01-28T19:35:46.763 に答える