Django - Как я могу передать информацию с моей карты Google в мой вид? - PullRequest
Новая
       1

Django - Как я могу передать информацию с моей карты Google в мой вид?

0 голосов
/ 15 марта 2019

Я использую Django, и моя карта настроена так в моем index.html: 

<div id="map"></div>
<script>
var map;
function initMap(){
    map = new google.maps.Map(document.getElementById('map'),{
        center: {lat: {{clat}}, lng: {{clng}}},
        zoom:12
    });
}
</script>
<script src={{gmap_url}} async def></script>

Сначала я хочу запустить карту с маркерами из моей базы данных, которые вписываются в показанную область. Затем добавьте возможность для пользователя изменять отображаемую область (перетаскивание или масштабирование) и нажмите кнопку, которая будет запрашивать мою базу данных на основе вновь отображаемой области карты. Как я могу узнать, в какой области отображается моя карта?

Я также хотел бы запросить мою базу данных, когда пользователь нажимает на маркер, используя информацию, хранящуюся в этом маркере, как я могу передать информацию в мой просмотр по клику?

1 Ответ

0 голосов
/ 15 марта 2019

Вы можете получить ограничивающую рамку с карты, а затем отправить эти данные в качестве параметра запроса в GET-запросе на ваш сервер django, который затем может выполнить пространственный запрос ваших данных в этой ограничительной рамке и отправить данные обратно на ваш карта. Это будет выглядеть примерно так.

index.html 

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src={{gmap_url}}></script>
    <script src={{axios_url}}></script>
    <script src={{js-cookie_url}}></script>
  </head>
  <button onclick="sendBounds()">Click me to send bounds!</button>
  <div id="map"></div>
</html>

<script>
var map

const postRequest = axios.create({
  baseURL: '/api',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json',
    'X-CSRFToken': Cookies.get('csrftoken')
  }
})

function initMap() {
    map = new google.maps.Map(document.getElementById('map'),{
        center: {lat: {{clat}}, lng: {{clng}}},
        zoom:12
    })
}

function sendBounds() {
  const payload = { 'bounds': map.getBounds() }
  postRequest.get(`models/`, { params: payload })
             .then(response => response.data.results)
}
</script>

views.py 

from django.contrib.gis.geos import Polygon
from rest_framework import generics

from .models import Model
from .serializers import ModelSerializer


class ModelAPIView(generics.ListAPIView):
    lookup_field = 'pk'
    serializer_class = ModelSerializer

    def get_queryset(self):
        bounds = self.request.GET.get('bounds')
        # Probably need to cast all these string coordinates to floats here
        geom = Polygon.from_bbox(bounds)
        queryset = Model.objects.filter(poly__contained=geom)

        return queryset

    def get_serializer_context(self, *args, **kwargs):
        return {'request': self.request}

urls.py 

from django.urls import path

from .views import ModelAPIView

urlpatterns = [
    path('api/models/', ModelAPIView.as_view(), name='model-list'),
]
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...