谷歌地图：获得路线，公里，和...价格

我认为我在一个项目可能对我来说太多了，但我认为你可以把我放在正确的方向。谷歌地图：获得路线，公里，和...价格

我们正在尝试创建一个表单，用户可以在Google地图示例（http://code.google.com/apis/maps/documentation/examples/directions-advanced.html）中看到一个起点和一个结束点，以便输出地图，其中的路线和号码两点之间的公里数。

问题是我们需要将这些Km“翻译”为$。

我认为这可以很容易完成，但我们会有太多的变数，如乘客人数（要选择的下拉菜单）。

我怎么能把它结合起来？我应该写一个特殊的表单，使用一些PHP？我迷失在这里。我怎么能这样做？

假设1公里= 100 $ 并且每个超出第一个人的额外人员将为该价格增加100美元。

因此有20公里2人= $ 300

1 - 我可以使嵌入一些变量到谷歌代码？
2-表格要求如何？

非常感谢您的帮助。

谷歌代码

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, 
区域）{ gdir.load（ “来自：” + FROMADDRESS + “到” +的toAddress， { “区域设置”：语言环境}）; }
function handleErrors(){ 
if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS) 
    alert("No corresponding geographic location could be found for 
指定地址中的一个。这可能是由于一个事实，即地址是比较新的，也可能是不正确\ n错误代码：“+ gdir.getStatus（）的代码）; 否则，如果（gdir.getStatus（）代码。 ==“G_GEO_SERVER_ERROR”）警报（“地理编码或指示请求未能成功处理，但失败的确切原因未知。\ n错误 code：”+ 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 
地址解析器的请求，这意味着一个空地址被指定为输入。佛r指示请求，这意味着在输入中未指定任何查询。\ n错误代码：“+ gdir.getStatus（）。code）;

//否则，如果（gdir.getStatus（）。代码 == G_UNAVAILABLE_ADDRESS）< ---文件错误？这是要么没有定义，要么 Doc是错误的//警报（“给定地址的地理编码或给定路线查询路由不能由于合同原因或返回。\ 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 
它给出了。 \ n错误代码： “+ gdir.getStatus（）的代码）;
else if (gdir.getStatus().code == G_GEO_BAD_REQUEST) 
    alert("A directions request could not be successfully parsed.\n 
错误代码：”。+ gdir.getStatus（）的代码）;
else alert("An unknown error occurred."); 
     } 
功能onGDirectionsLoad（）{// 使用此功能来访问有关最新的load（） //结果的信息。
// e.g. 
    // document.getElementById("getStatus").innerHTML 
= gdir.getStatus（）。code; //和亚达内容十分重要...}

来源

2009-10-05 Peanuts

在你onGDirectionsLoad（）函数，你可以得到公里的距离与

gdir.getDistance().meters/1000

我假设你不需要我来告诉你如有必要，如何进行四舍五入，乘以100美元，并增加额外的旅客费用。你

来源

2009-10-05 09:59:38

感谢迈克，我没有得到的是多余的乘客，我不知道这样的功能可能是如何。如果你给我的结构语法，我可以弄明白:)对不起，我在我的开始 – Peanuts 2009-10-05 14:35:05

你不说你的旅客数量的信息被保存在哪里。如果用户将其输入到输入字段中，则可以使用parseInt（document.getElementById（“passengers”）.value）。 – 2009-10-06 12:00:50

全码：

<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>

粘贴在一个HTML文档，并对其进行测试。我得到的价值在KM>转换成英里>并得到英镑的价格。

我刚刚那样做了，它不是100％的func，但你明白了。

要calc下您的乘客，你只需要得到这样的：

<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>

，并获得值打印：

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

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

}）

还是那句话：你可能有一些埃罗的，但它是func，你可以从那里得到一个想法和指导。

来源

2015-07-02 17:36:43

谷歌地图：获得路线，公里，和...价格

回答

相关问题