Google Maps：获取路线，公里和…价格

Question

I think I am in a project which is probably too much for me, but I thought you could put me in the right direction. 我认为我参与的项目可能对我来说太过分了，但我认为您可以将我带往正确的方向。

We are trying to have a form where the user will write a starting point and an ending one, as seen in the Google Maps examples ( http://code.google.com/apis/maps/documentation/examples/directions-advanced.html ), in order to output a map, the route in it, and the number of kilometers between the two points. 我们正在尝试提供一种表单，用户可以在该表单中输入起点和终点，如Google Maps示例中所示（ http://code.google.com/apis/maps/documentation/examples/directions-advanced。 html ），以便输出地图，其中的路线以及两点之间的公里数。

The thing is that we need to "translate" those Km into $. 关键是我们需要将这些Km“转换”为$。

I think this could be easily done, but we will have too some variables, like the number of passengers (a dropdown menu to select). 我认为这很容易做到，但是我们会有太多变量，例如乘客人数（选择下拉菜单）。

How on earth can I combine that ? 我到底该如何结合呢？ Should I write a special form, use some PHP ? 我应该编写一种特殊形式，使用一些PHP吗？ I'm lost here. 我在这里迷路了。 How could I do it ? 我该怎么办？

Say that 1 km = 100$ and every extra person beyond the first one will add 100$ to that price. 假设1公里= 100美元，那么第一个以外的其他人将为该价格增加100美元。

So 20 Km with 2 persons = 300$ 所以20公里2人= 300 $

1- Can I embedd some variable into the Google code ? 1-我可以在Google代码中嵌入一些变量吗？
2- How would be the form to call for it ? 2-要求的形式如何？

Thanks very much for your help. 非常感谢您的帮助。

Google Code 谷歌代码

 var map; var gdir; var geocoder = null; var addressMarker; function initialize() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map_canvas")); gdir = new GDirections(map, document.getElementById("directions")); GEvent.addListener(gdir, "load", onGDirectionsLoad); GEvent.addListener(gdir, "error", handleErrors); setDirections("San Francisco", "Mountain View", "en_US"); } } function setDirections(fromAddress, toAddress, 
locale) { gdir.load("from: " + fromAddress + " to: " + toAddress, { "locale": locale }); locale）{gdir.load（“ from：” + fromAddress +“ to：” + toAddress，{“ locale”：locale}）; } }
 function handleErrors(){ if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS) alert("No corresponding geographic location could be found for 
one of the specified addresses. 指定的地址之一。 This may be due to the fact that the address is relatively new, or it may be incorrect.\\nError code: " + gdir.getStatus().code); else if (gdir.getStatus().code == G_GEO_SERVER_ERROR) alert("A geocoding or directions request could not be successfully processed, yet the exact reason for the failure is not known.\\n Error code: " + gdir.getStatus().code); \\ n错误代码：“ + gdir.getStatus（）。code）；否则，如果（gdir.getStatus（）。code == G_GEO_SERVER_ERROR）警报，则可能是由于该地址是相对较新的事实，或者它可能是错误的。（“无法成功处理地理编码或路线请求，但是未知失败的确切原因。\\ n错误代码：“ + gdir.getStatus（）。code）；
  else if (gdir.getStatus().code == G_GEO_MISSING_QUERY) alert("The HTTP q parameter was either missing or had no value. For 
geocoder requests, this means that an empty address was specified as input. geocoder要求，这表示已指定一个空地址作为输入。 For directions requests, this means that no query was specified in the input.\\n Error code: " + gdir.getStatus().code); 对于路线请求，这意味着在输入中未指定查询。\\ n错误代码：“ + gdir.getStatus（）。code）;

// else if (gdir.getStatus().code == G_UNAVAILABLE_ADDRESS) <--- Doc bug... this is either not defined, or Doc is wrong // alert("The geocode for the given address or the route for the given directions query cannot be returned due to legal or contractual reasons.\\n Error code: " + gdir.getStatus().code); //否则，如果（gdir.getStatus（）。code == G_UNAVAILABLE_ADDRESS）<---文档错误...或者这是未定义，或者文档是错误的// // alert（“给定地址的地理编码或\\ n错误代码：“ + gdir.getStatus（）。code）;由于法律或合同原因，无法返回给定的路线查询。
  else if (gdir.getStatus().code == G_GEO_BAD_KEY) alert("The given key is either invalid or does not match the domain 
for which it was given. 为此。 \\n Error code: " + gdir.getStatus().code); \\ n错误代码：“ + gdir.getStatus（）。code）;
  else if (gdir.getStatus().code == G_GEO_BAD_REQUEST) alert("A directions request could not be successfully parsed.\\n 
Error code: " + gdir.getStatus().code); 错误代码：“ + gdir.getStatus（）。code）;
  else alert("An unknown error occurred."); } 
function onGDirectionsLoad(){ // Use this function to access information about the latest load() // results. function onGDirectionsLoad（）{//使用此函数可访问有关最新load（）//结果的信息。
  // eg // document.getElementById("getStatus").innerHTML 
= gdir.getStatus().code; = gdir.getStatus（）。code; // and yada yada yada... } //和yada yada yada ...}

Answer 1

Full code for you: 您的完整代码：

<html>
<head>
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <title>Distance Calculator</title> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <style type="text/css">
        #map_canvas { 
            height:500px;
        }
    </style>

    <script type="text/javascript">
    var directionDisplay;
    var directionsService = new google.maps.DirectionsService();
    var map;  

    function initialize() {
        var start = document.getElementById("start");
        var end = document.getElementById("end");
        var autocompletePickpUp = new google.maps.places.Autocomplete(start);
        var autocompleteDelivery = new google.maps.places.Autocomplete(end);
        var uk = new google.maps.LatLng(51.511035, -0.132315);
        var myOptions = {
            zoom:12,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            center: uk
        } 

        //testing


        directionsDisplay = new google.maps.DirectionsRenderer();
        directionsDisplay.setMap(map);
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        autocompletePickpUp.bindTo('bounds', map); 
        autocompleteDelivery.bindTo('bounds', map);   

    }

    function calcRoute() { 
        var startValue =start.value;
        var endValue = end.value;
        var distanceInput = document.getElementById("distanceKm");
        var distanceMl = document.getElementById("distanceMl");
        var price = document.getElementById("price");

        var request = {
            origin:startValue, 
            destination:endValue,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };

        directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
                distanceInput.value = response.routes[0].legs[0].distance.value / 1000; 
                distanceMl.value =  response.routes[0].legs[0].distance.value * 0.000621371;
                price.value = distanceMl.value * 2.50;

            }
        });         
    }

    </script>
</head>
<body onload="initialize()">
    <div>
        <p>
            <label for="start">Start: </label>
            <input type="text" name="start" id="start" />

            <label for="end">End: </label>
            <input type="text" name="end" id="end" />

            <input type="submit" value="Calculate Route" onclick="calcRoute()" /> 
        </p>
        <p>
            <label for="distanceInKm">Distance (km): </label>
            <input type="text" name="distanceKm" id="distanceKm" readonly="true" />
        </p>

        <p>
            <label for="distanceInMiles">Distance (ML): </label>
            <input type="text" name="distanceMl" id="distanceMl" readonly="true" />
        </p>

        <p>
            <label for="price">Price: </label>
            <input type="text" name="price" id="price" readonly="true" />
        </p>
    </div>
    <div id="map_canvas"></div>
</body>

paste this in a html doc, and test it. 将其粘贴到html文档中，然后进行测试。 I'm getting the values in KM > convert it in Miles > and get a price in £. 我正在KM中获取值>在Miles中进行转换>并以£为价格。

I just did that now, and it is not 100% func but you get the idea. 我现在只是这样做，它不是100％的功能，但是您明白了。

To calc your passengers you just need to get this : 要计算您的乘客，您只需要获取以下内容：

<div class="form-group">
   <label>Table</label>
    <select class="form-control required" name="kitchen_table" id="kitchen_table">
       <option value="" selected>Quantity</option>
        <option value="0">0</option>
        <option value="10">1</option>
        <option value="20">2</option>
        <option value="30">3</option>
        <option value="40">4</option>
        </select>
     </div>

 <div class="live_quote">
         <p>Your total is: <span id="total_quote"></span> </p>
 </div>

and get the values to print it : 并获取值进行打印：

$('select').change(function(){
  var total = 0;

  $('select :selected').each(function() {
    total += Number($(this).val());
  });
$("#total_quote").html(total);

}) }）

AGAIN: you may have some erro's, but it is func, you can get an idea and guide from there. 再次：您可能有一些错误，但这很有趣，您可以从那里得到一个想法和指导。

Answer 2

In your onGDirectionsLoad() function, you can get the distance in km with 在onGDirectionsLoad（）函数中，您可以使用

 gdir.getDistance().meters/1000

I assume you don't need me to tell you how to perform rounding, if necessary, multiply it by $100 and add the extra passenger fees. 我假设您不需要我告诉您如何进行舍入，如有必要，将其乘以$ 100并加上额外的旅客费用。

Google Maps：获取路线，公里和…价格

问题描述

2 个解决方案

解决方案1
3 2015-07-02 17:36:43

解决方案2
1 2009-10-05 09:59:38

Google Maps：获取路线，公里和…价格

问题描述

2 个解决方案

解决方案1 3 2015-07-02 17:36:43

解决方案2 1 2009-10-05 09:59:38

解决方案1
3 2015-07-02 17:36:43

解决方案2
1 2009-10-05 09:59:38