如何将 Google 地图连接到 GeoDjango？

Question

GeoDjango 文档没有说明任何关于连接 GMap 的信息，我不明白发生了什么。

models.py:

from django.contrib.gis.db import models
class Location(models.Model):
    name = models.CharField(max_length=100)
    coords = models.PointField(srid=4326, blank=True, null=True)

forms.py:

from django.contrib.gis import forms
class LocationForm(forms.ModelForm):
    class Meta:
        model = Location
        fields = ['coords', 'name']

在 add_location.html 中自动为 'coords' 生成这样的代码：

<div id="div_id_coords" class="form-group">
    <div class="controls ">
        <div id="id_coords_div_map">

            <div id="id_coords_map"></div>

            <span class="clear_features">
                <a href="javascript:geodjango_coords.clearFeatures()">Delete</a>
            </span>
            <textarea id="id_coords" class="vSerializedField required" cols="150" rows="10" name="coords"></textarea>

            <script type="text/javascript">
                    var map_options = {};
                    var options = {
                        geom_name: 'Point',
                        id: 'id_coords',
                        map_id: 'id_coords_map',
                        map_options: map_options,
                        map_srid: 4326,
                        name: 'coords'
                    };

                    var geodjango_coords = new MapWidget(options);
            </script>

        </div>
    </div>
</div>

在我的 js 文件中，我试图将标记的坐标获取到我的模型中：

    var mapOptions = {...};
    map = new google.maps.Map($('#id_coords_map')[0], mapOptions);

    map.addListener('click', function(e){
            placeMarker(e.latLng, map);
            var position = marker.getPosition();
    });

    var marker;
    function placeMarker(latLng, map) {
        marker = new google.maps.Marker({...});
        return marker
    }

但是没用。它甚至没有获得坐标，因为我在 chrome 控制台中收到错误（当我在我的表单中按下按钮添加位置时）：

Uncaught ReferenceError: MapWidget is not defined

相关线路：

var geodjango_coords = new MapWidget(options);

并且我可以看到在表单字段 COORDS 中出现验证错误 - "No geometry value provided"

我猜想连接 GMap 有问题，检查了 COORDS 字段中的小部件（通过 ModelForm __init__ 中的 self.fields['coords'].widget），结果是 OpenLayers 小部件。

我应该怎么做才能将 GMap 作为小部件并获取实例中保存的标记坐标？

P.S。页面的 HEAD 内容（它是关于连接到 google 地图）：

<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/25/5/intl/ru_ALL/common.js"></script>

<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/25/5/intl/ru_ALL/map.js"></script>

<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/25/5/intl/ru_ALL/util.js"></script>

<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/25/5/intl/ru_ALL/onion.js"></script>

<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/25/5/intl/ru_ALL/stats.js"></script>

<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/25/5/intl/ru_ALL/controls.js"></script>

<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/25/5/intl/ru_ALL/marker.js"></script>

Answer 1

将 {{ form.media }} 添加到 HEAD 中消除了 Chrome 控制台的错误 'Uncaught ReferenceError: MapWidget is not defined'.. 但它没有解决问题 - 请看- GeoDjango Google Maps - error - No geometry value provided

如何将 Google 地图连接到 GeoDjango？

How to hook up Google Maps to GeoDjango?

django

google-maps

geodjango

google-maps-api-3