Django-如何保存谷歌地图多边形区域javascript代码以供查看？

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

用户通过谷歌地图选择他们的区域多边形应该被保存。我想对这些多边形进行计算。另一方面，其他多边形应显示在地图上。我希望将用户选定的多边形区域数组传递到my forms.py、views.py中，并在模板中显示其选定区域

模型

形式

观点

模板 在创建页面中，您希望将数组传递给我的视图。我无法输入坐标数组。我如何通过阵列

---

要保存用户选择的多边形，在“polygoncomplete”函数中，可以使用坐标向Django视图编写AJAX调用，以将其保存到模型中。保存多边形的坐标，并使用GeoJSON将其加载到地图中。将坐标的有效GeoJSON从URL传递到地图，例如/polygons.json：

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

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>

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