2015-06-05 8 views
-1

Доброе утро,Сгенерировать URL из выпадающего меню

У меня есть следующая проблема.

Я пытаюсь настроить калькулятор расстояния с карт Google.

Google использует свой собственный API в соответствии с этим форматом:

https://maps.googleapis.com/maps/api/distancematrix/output?parameters

Выход может быть JSON или XML.

Идея состоит в том, чтобы использовать широту и долготу, чтобы закодировать URL:

https://maps.googleapis.com/maps/api/distancematrix/json?origins=25.479838,-80.422374&destinations=25.55727,-80.33372

Это пример того, как апи обеспечивает вывод.

Теперь я хочу иметь возможность генерировать URL из списка широт и долгот, которые у меня есть.

Оба поля будет выпадающий список с автозаполнения (DataList функция кажется полезной для этого)

И когда я нажимаю на кнопку, как рассчитать расстояние, он будет генерировать URL из 2-х входов, которые я выбрал, и запустить Это, чтобы предоставить мне выход.

Выход будет в json, поэтому мы также должны найти способ интерпретировать его в html.

Я действительно был бы признателен за помощь в этом.

Спасибо

ответ

0

С Distance Matrix API конечной точки:

https://maps.googleapis.com/maps/api/distancematrix/output?parameters 

не поддерживает JSONP вы можете использовать Distance Matrix Service как часть JavaScript API Карт Google.

Пример

function calc() { 
 
    var originVals = $('#origins').val(); 
 
    var destVals = $('#destinations').val(); 
 
    var modeVal = $('#modes').val(); 
 
    calculateDistances(originVals, destVals, modeVal,printInfo); 
 
} 
 

 

 
function printInfo(response, status) { 
 
    if (status != google.maps.DistanceMatrixStatus.OK) { 
 
     console.log('An error occured: ' + status); 
 
     return; 
 
    } 
 

 
    var output = JSON.stringify(response, null, 2); 
 
    $("#output").text(output); 
 

 
} 
 

 

 
function calculateDistances(originVals, destVals, mode, callback) { 
 

 
    var origins = []; 
 
    originVals.forEach(function (val) { 
 
     var ll = val.split(','); 
 
     origins.push(new google.maps.LatLng(ll[0], ll[1])); 
 
    }); 
 

 
    var destinations = []; 
 
    destVals.forEach(function (val) { 
 
     var ll = val.split(','); 
 
     destinations.push(new google.maps.LatLng(ll[0], ll[1])); 
 
    }); 
 

 
    var service = new google.maps.DistanceMatrixService(); 
 
    service.getDistanceMatrix(
 
     { 
 
      origins: origins, 
 
      destinations: destinations, 
 
      travelMode: mode.toUpperCase() 
 
     }, callback); 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script> 
 
<body> 
 
     <table> 
 
      <tr> 
 
       <td colspan="2"> 
 
        <label for="modes">Travel Modes</label>    
 
        <select id="modes"> 
 
         <option value="driving">Driving</option> 
 
         <option value="walking">Walking</option> 
 
         <option value="bicycling">Bicycling</option> 
 
         <option value="transit">Transit</option> 
 
        </select> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td> 
 
        <label for="origins">Origins</label> 
 
       </td> 
 
       <td> 
 
        <label for="destinations">Destinations</label> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td> 
 
        <select id="origins" multiple="multiple"> 
 
         <option value="49.256149, -123.074132">Vancouver+BC</option> 
 
         <option value="47.608136, -122.309813">Seattle</option> 
 
        </select>   
 
       </td> 
 
       <td> 
 
        <select id="destinations" multiple="multiple"> 
 
         <option value="37.749624, -122.442407">San+Francisco</option> 
 
         <option value="48.430068, -123.365541">Victoria+BC</option> 
 
        </select>  
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td colspan="2"> 
 
        <input value="Calculate" type="button" onclick="calc();" /> 
 
       </td> 
 
      </tr> 
 
     </table> 
 
     <br/> 
 
     <span>Result:</span> 
 
     <pre style="background-color: #c0c0c0" id="output"></pre> 
 
</body>

+0

Есть ли способ, что пара в Jquery автозаполнения? См. У меня есть список из более чем 200 адресов, и я бы хотел, чтобы 2 из них вошли в 2 поля (источник + место назначения), а затем нажмите кнопку, чтобы получить выход. – AlexCTinter

+0

Смотрите у меня есть 2 куска кода теперь: 1) автозаполнения JQuery, который работает 2) расстояние вычисления матрицы Отдельно они работают, но я хочу использовать JQuery автозаполнения для того, чтобы ввести адреса. В матрице расстояний я должен вручную ввести адрес. – AlexCTinter