Javascript 从谷歌地图获取距离并乘以两个速率中的一个_Javascript_Google Maps_Maps

Javascript 从谷歌地图获取距离并乘以两个速率中的一个

javascript google-maps maps

Javascript 从谷歌地图获取距离并乘以两个速率中的一个,javascript,google-maps,maps,Javascript,Google Maps,Maps,我在网上找到了这段代码，它几乎满足了我的需要。问题是，我需要它给我一个价格的基础上，用户是否希望当天交货或当天紧急交货。但是我不能让它工作表格应包含两个地址，计算它们之间的距离，如果选择了同一天，则乘以1英镑；如果选择了同一天，则乘以1.20英镑 <?php session_start(); $rate = 1; $urgent = 1.2; //} <script type="text/javascript" src="https://maps.googleapis.com/m

我在网上找到了这段代码，它几乎满足了我的需要。问题是，我需要它给我一个价格的基础上，用户是否希望当天交货或当天紧急交货。但是我不能让它工作

表格应包含两个地址，计算它们之间的距离，如果选择了同一天，则乘以1英镑；如果选择了同一天，则乘以1.20英镑

<?php
session_start();
$rate = 1;
$urgent = 1.2;
//}

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
    //<![CDATA[
      var map = null;
      var directionDisplay;
      var directionsService = new google.maps.DirectionsService();

      function initialize() {
        directionsDisplay = new google.maps.DirectionsRenderer();

        var UK = new google.maps.LatLng(55.7591402,-4.1883331);

        var mapOptions = {  
                    center              : UK,
                    zoom                : 4,
                    minZoom             : 3,
                    streetViewControl   : false,
                    mapTypeId           : google.maps.MapTypeId.ROADMAP,
                    zoomControlOptions  : {style:google.maps.ZoomControlStyle.MEDIUM}
                };


        map = new google.maps.Map(document.getElementById('map_canvas'),
            mapOptions);

         //Find From location    
    var fromText = document.getElementById('start');
    var fromAuto = new google.maps.places.Autocomplete(fromText);
    fromAuto.bindTo('bounds', map);
    //Find To location
    var toText = document.getElementById('end');
    var toAuto = new google.maps.places.Autocomplete(toText);
    toAuto.bindTo('bounds', map);
    //  
        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById('directions-panel'));

        /*var control = document.getElementById('control');
        control.style.display = 'block';
        map.controls[google.maps.ControlPosition.TOP].push(control);*/
      }

      function calcRoute() {
        var start = document.getElementById('start').value;
        var end = document.getElementById('end').value;
        var request = {
          origin: start,
          destination: end,
          travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService.route(request, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
            computeTotalDistance(response);
          }
        });
      }
      function computeTotalDistance(result) {
      var total = 0;
      var myroute = result.routes[0];
      for (i = 0; i < myroute.legs.length; i++) {
        total += myroute.legs[i].distance.value;
      }
      total = total / 1000;
      /*Start Calculating Distance Fair*/
      if (document.getElementById('sameday').checked == true) {
          var cost = ((total * <?php echo $rate; ?>));
      }
      else if (document.getElementById('samedayurgent').checked == true) {
          var cost = ((total * <?php echo $urgent; ?>));
      }

            var fare = total * cost;
            var fare = Math.round(fare*100)/100;
      /*Distance Fair Calculation Ends*/

      document.getElementById("total").innerHTML = "Total Distance = " + total + " km and FARE = £" + fare;
      }

    function auto() {
    var input = document.getElementById[('start'), ('end')];
    var types
    var options = {
       types: [],
       componentRestrictions: {country: ["UK"]}
        };
        var autocomplete = new google.maps.places.Autocomplete(input, options);
     }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>
<body onLoad="initialize()">
<table width="380px" cellpadding="0" cellspacing="0" style="border-collapse:collapse">
  <tr>
    <td style="padding:5px;">
    <table width="375px" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td><div id="map_canvas" style="width: 374px; height: 300px; border: solid 1px #336699"></div></td>
        </tr>
        <tr>
          <td><div id="form" style="width:374px; text-align:center; border: solid 1px #336699; background:#d1e1e4;">
          <input type="radio" name="post-type" value="sameday" checked> Same Day
            <br>
            <input type="radio" name="post-type" value="samedayurgent"> Same Day Urgent
            <br>
              From:
                <input type="text" id="start" size="60px" name="start" placeholder="Enter Location From">
                <br />
                To:
                <input size="60px" type="text" id="end" name="end" placeholder="Enter Destination ">
                <input type="button" value="Calculate" onClick="calcRoute();">
             <div id="total"></div>
             </div></td>
        </tr>
      </table>
      </td>
  </tr>
</table>
</body>
</html>

基于你所说的-摆脱
<?php
session_start();
$rate = 1;
$urgent = 1.2;

谢谢大家的帮助。下面是我如何让它工作的：
 <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
//<![CDATA[
  var map = null;
       var directionDisplay;
       var directionsService = new google.maps.DirectionsService();

   function initialize() {
   directionsDisplay = new google.maps.DirectionsRenderer();

   var UK = new google.maps.LatLng(56.9630794,-4.016831);

    var mapOptions = {  
        center              : UK,
                    zoom                : 6,
                    minZoom             : 3,
                    streetViewControl   : false,
                    mapTypeId           : google.maps.MapTypeId.ROADMAP,
                    zoomControlOptions  :     {style:google.maps.ZoomControlStyle.MEDIUM}
            };


    map = new google.maps.Map(document.getElementById('map_canvas'),
        mapOptions);

     //Find From location    
var fromText = document.getElementById('start');
var fromAuto = new google.maps.places.Autocomplete(fromText);
fromAuto.bindTo('bounds', map);
//Find To location
var toText = document.getElementById('end');
var toAuto = new google.maps.places.Autocomplete(toText);
toAuto.bindTo('bounds', map);
//  
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById('directions-panel'));

    /*var control = document.getElementById('control');
        control.style.display = 'block';
        map.controls[google.maps.ControlPosition.TOP].push(control);*/
      }

      function calcRoute() {
        var start = document.getElementById('start').value;
        var end = document.getElementById('end').value;
        var request = {
      origin: start,
      destination: end,
      travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
        computeTotalDistance(response);
      }
    });
  }
  function computeTotalDistance(result) {
  var total = 0;
  var myroute = result.routes[0];
  for (i = 0; i < myroute.legs.length; i++) {
    total += myroute.legs[i].distance.value;
  }
  total = total / 1609.344;
  var total = Math.round(total);
  /*Start Calculating Distance Fair*/

  var sameday = document.getElementById("sameday");
  var samedayurgent = document.getElementById("samedayurgent");

 if (sameday.checked)
 {
     var rate = 1;
 }
  else if (samedayurgent.checked)
 {
    var rate = 1.20;
 }              
    var fare = total * rate;
var fare = Math.round(fare*100)/100;

 if (fare < 5.5)
 {
    fare= 5.5;
 }

    var price = fare.toFixed(2)
  /*Distance Fair Calculation Ends*/

  document.getElementById("total").innerHTML =  " " + total + " miles";
  document.getElementById("price").innerHTML = " £" + price + " (excl. VAT)";
  }

function auto() {
var input = document.getElementById[('start'), ('end')];
var types
var options = {
   types: [],
   componentRestrictions: {country: ["UK"]}
    };
    var autocomplete = new google.maps.places.Autocomplete(input, options);
 }

  google.maps.event.addDomListener(window, 'load', initialize);


//我不能让它工作，这不是一个明确的问题描述。代码现在做什么？你想让它做什么？我可以看到您正在计算cost=total*rate
然后fare=total*cost
-这意味着fare=total*total*cost
-这也是一个php页面，其中还有，您没有为'sameday'和'samedayurgent'ID提供无线电输入，因此语句document.getElementById（'sameday'）.checked==true
和document.getElementById（'samedayurgent'））.checked==true不起作用。谢谢你的帮助。我终于让它自己工作了。不，很抱歉，不是你对函数所做的更改从未起作用。我从未尝试过它，因为我以不同的方式自己解决了它。我非常感谢你的时间，谢谢你的帮助。
<input type="radio" name="post-type" id='sameday' checked> Same Day
<br>
<input type="radio" name="post-type" id='samedayurgent'> Same Day Urgent

 <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
//<![CDATA[
  var map = null;
       var directionDisplay;
       var directionsService = new google.maps.DirectionsService();

   function initialize() {
   directionsDisplay = new google.maps.DirectionsRenderer();

   var UK = new google.maps.LatLng(56.9630794,-4.016831);

    var mapOptions = {  
        center              : UK,
                    zoom                : 6,
                    minZoom             : 3,
                    streetViewControl   : false,
                    mapTypeId           : google.maps.MapTypeId.ROADMAP,
                    zoomControlOptions  :     {style:google.maps.ZoomControlStyle.MEDIUM}
            };


    map = new google.maps.Map(document.getElementById('map_canvas'),
        mapOptions);

     //Find From location    
var fromText = document.getElementById('start');
var fromAuto = new google.maps.places.Autocomplete(fromText);
fromAuto.bindTo('bounds', map);
//Find To location
var toText = document.getElementById('end');
var toAuto = new google.maps.places.Autocomplete(toText);
toAuto.bindTo('bounds', map);
//  
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById('directions-panel'));

    /*var control = document.getElementById('control');
        control.style.display = 'block';
        map.controls[google.maps.ControlPosition.TOP].push(control);*/
      }

      function calcRoute() {
        var start = document.getElementById('start').value;
        var end = document.getElementById('end').value;
        var request = {
      origin: start,
      destination: end,
      travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
        computeTotalDistance(response);
      }
    });
  }
  function computeTotalDistance(result) {
  var total = 0;
  var myroute = result.routes[0];
  for (i = 0; i < myroute.legs.length; i++) {
    total += myroute.legs[i].distance.value;
  }
  total = total / 1609.344;
  var total = Math.round(total);
  /*Start Calculating Distance Fair*/

  var sameday = document.getElementById("sameday");
  var samedayurgent = document.getElementById("samedayurgent");

 if (sameday.checked)
 {
     var rate = 1;
 }
  else if (samedayurgent.checked)
 {
    var rate = 1.20;
 }              
    var fare = total * rate;
var fare = Math.round(fare*100)/100;

 if (fare < 5.5)
 {
    fare= 5.5;
 }

    var price = fare.toFixed(2)
  /*Distance Fair Calculation Ends*/

  document.getElementById("total").innerHTML =  " " + total + " miles";
  document.getElementById("price").innerHTML = " £" + price + " (excl. VAT)";
  }

function auto() {
var input = document.getElementById[('start'), ('end')];
var types
var options = {
   types: [],
   componentRestrictions: {country: ["UK"]}
    };
    var autocomplete = new google.maps.places.Autocomplete(input, options);
 }

  google.maps.event.addDomListener(window, 'load', initialize);