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

#django #google-maps

#django #google-карты

Вопрос:

Я использую 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>

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

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

1. Ваш вопрос слишком широкий, чтобы на него можно было ответить здесь, на SO. Разбейте проблему на более мелкие фрагменты, покажите, что вы на самом деле пробовали. Задавайте по одному вопросу за раз и возвращайтесь с более конкретным вопросом. Удачи!

Ответ №1:

Вы можете получить ограничивающую рамку с карты, а затем отправить эти данные в качестве параметра запроса в запросе 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'),
]