django python Google Расстояние матрицы API json вопрос - PullRequest
Новая
       4

django python Google Расстояние матрицы API json вопрос

1 голос
/ 09 марта 2020

Итак, я новичок в python и Django. Я создал вид и страницу html для очень простой c формы, которая использует API матрицы расстояния Google. Я могу отобразить вывод json обратно на мою страницу html без каких-либо проблем. вопрос в том, как мне получить расстояние в милях, чтобы оно появилось на моей странице html. Прямо сейчас я просто получаю сырой json. но я не могу получить только расстояние в милях.

Текущий вывод со страницы HTML: 

    origin ['660 Celebration Ave, Celebration, FL 34747, USA']

    destination ['878 Columbus Ave, New York, NY 10023, USA']

    distance in miles: [{'elements': [{'distance': {'text': '1,093 mi', 'value': 1759428}, 
   'duration': {'text': '16 hours 13 mins', 'value': 58364}, 'status': 'OK'}]}]

'' 'views.py 

def mapdistance_view(request):
distance = {}

if 'From' in request.GET:
    origin = request.GET['From']
    destination = request.GET['To']
    apikey = "mykey"
    url = 'https://maps.googleapis.com/maps/api/distancematrix/json?mode=driving&units=imperial&origins=' + origin + ',DC&destinations=' + destination + ',' + apikey      
    response = requests.get(url)
    distance = response.json()
    print(url)
    print(distance)
return render(request, 'mapdistance.html', {'distance': distance})

'' '

Html page' '' 

   {% block content %}
   <h2>map API</h2>
    <form method="GET"> {% csrf_token %}
   <label>Pickup Location:</label><input type="text" name="From"><br>
   <label>Delivery Location:</label><input type="text" name="To"><br>
   <button type="submit">post to google map</button>
   </form>
   {% if distance %}
   <p><strong>origin {{ distance.origin_addresses }}</strong></p>
   <p><strong>destination {{ distance.destination_addresses }}</strong></p>
       <p><strong>distance in miles: {{ distance.rows }}</strong></p>
  {% endif %}
  {% endblock %}

'' '

1 Ответ

0 голосов
/ 09 марта 2020

Я не уверен, как индексировать JSON в Html, но вы могли бы сделать что-то вроде этого. Сначала я добавил идентификатор к абзацу, который содержит расстояние в милях. Затем я импортировал jquery и вложил его в теги скрипта. В jquery выберите абзац id и измените содержимое внутри на индекс объекта json.

Ниже приводится приблизительный обзор того, как это должно выглядеть, но это может сработать? Superrrrr хакерский способ индексировать объект json и, надеюсь, есть более чистый способ. 

{% block content %}
<h2>map API</h2>
<form method="GET"> {% csrf_token %}
<label>Pickup Location:</label><input type="text" name="From"><br>
<label>Delivery Location:</label><input type="text" name="To"><br>
<button type="submit">post to google map</button>
</form>
{% if distance %}
<p><strong>origin {{ distance.origin_addresses }}</strong></p>
<p><strong>destination {{ distance.destination_addresses }}</strong></p>
   <p id="miles-paragraph"><strong>distance in miles: {{ distance.rows }}</strong></p>
{% endif %}
{% endblock %}

<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256- WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script>
var value = JSON.parse("{{distance|escapejs}}");
$(document).ready(function(){
$('#miles-paragraph').html(value[0]["elements"]["distance"]["text"]);
</script>
...