Django - Как сохранить код карты Google Polygon javascript для просмотра?

Question

Я хочу создать область многоугольника на картах Google.

Пользователь должен выбрать свою область с помощью Google Maps. Полигон должен быть сохранен. Я хочу сделать расчеты на этих полигонах. С другой стороны, другие полигоны должны отображаться на карте. Я хочу передать пользователям выбранный массив полигонов в мои forms.py, views.py и показать их выбранные область в шаблоне.

Модель

from django.contrib.auth.models import User
from django.contrib.gis.db import models


class Category(models.Model):
    name = models.CharField(max_length=250)

    def __str__(self):
        return self.name

    class Property(models.Model):
        user = models.ForeignKey(User,default=None, null=True, on_delete=models.CASCADE)
        category = models.ForeignKey(Category, on_delete=models.CASCADE, null=True, blank=True)
        polygon = models.PolygonField()

Формы

class CreateFrom(forms.Form):
    category = forms.ModelChoiceField(Category.objects.all(), initial=1)
    polygon = forms.PolygonField(required=False)

def deploy(self, user):
    category = self.cleaned_data.get('category')
    polygon = self.cleaned_data.get('polygon')
    deploy = Property(user=user, category=category,  polygon=polygon)
    deploy.save()
    return deploy

Просмотры

def create(request, username):
    user = get_object_or_404(User, username=username)
    form = forms.CreateFrom()
    if request.method == 'POST':
        form = forms.CreateFrom(request.POST or None)
        if form.is_valid():
            form.deploy(user)
    return render(request, 'maps/maps.html', {'form': form})

Шаблон Со страницы Создать хочу передать массив моим представлениям . Я не могу ввести массив координат . Как мне передать массив .

<script>
var geocoder;
var map;
var polygonArray = [];

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.POLYGON,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        google.maps.drawing.OverlayType.MARKER,
        google.maps.drawing.OverlayType.CIRCLE,
        google.maps.drawing.OverlayType.POLYGON,
        google.maps.drawing.OverlayType.POLYLINE,
        google.maps.drawing.OverlayType.RECTANGLE
      ]
    },
  /* not useful on jsfiddle
  markerOptions: {
    icon: 'images/car-icon.png'
     }, */
     circleOptions: {
       fillColor: '#ffff00',
       fillOpacity: 1,
       strokeWeight: 5,
       clickable: false,
       editable: true,
       zIndex: 1
     },
       polygonOptions: {
       fillColor: '#BCDCF9',
       fillOpacity: 0.5,
       strokeWeight: 2,
       strokeColor: '#57ACF9',
       clickable: false,
       editable: false,
       zIndex: 1
     }
   });
    console.log(drawingManager)
    drawingManager.setMap(map)

  google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
    var path = polygon.getPath()
    var coordinates = [];


    for (var i = 0; i < path.length; i++) {
        coordinates.push({
            lat: path.getAt(i).lat(),
            lng: path.getAt(i).lng()
        });
    }

  });

}
google.maps.event.addDomListener(window, "load", initialize);
</script>

Answer 1

Чтобы сохранить выбранный пользователем полигон, в вашей функции 'polygoncomplete' вы можете написать вызов AJAX для представления Django с координатами, чтобы сохранить его в модели. Сохраните координаты полигонов и загрузите их на карту, используя Geo JSON. Передайте действительные Geo JSON координат на карту с URL-адреса, например /polygons.json:

map.data.loadGeoJson('/polygons.json');