谷歌地圖：獲得路線，公里，和...價格

我認爲我在一個項目可能對我來說太多了，但我認爲你可以把我放在正確的方向。谷歌地圖：獲得路線，公里，和...價格

我們正在嘗試創建一個表單，用戶可以在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

谷歌地圖：獲得路線，公里，和...價格

回答

相關問題