javascript - Django - 如何将 Google Maps Polygon area javascript 代码保存到 View？

问题描述

我想在谷歌地图上创建多边形区域。

用户通过谷歌地图选择他们的区域多边形应该被保存。我想对这些多边形进行计算。另一方面，其他多边形应显示在地图上。我想将用户选择的多边形区域数组传递到我的 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>

标签： javascriptdjangogoogle-maps

javascript - Django - 如何将 Google Maps Polygon area javascript 代码保存到 View？

问题描述

解决方案

推荐阅读