如何将 Google 地图连接到 GeoDjango？答案

【问题标题】：How to hook up Google Maps to GeoDjango?如何将 Google 地图连接到 GeoDjango？
【发布时间】：2016-07-01 08:17:28
【问题描述】：

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 中为“坐标”自动生成了这样的代码：

<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 的验证错误，我可以看到 - “未提供几何值”

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

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

附：页面上的 HEAD 内容（关于连接谷歌地图）：

<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>

【问题讨论】：

只是为了验证：您 100% 确定您自己的 JS 文件是在 Google JS 文件之后加载的？不过，如果我检查developers.google.com/maps/documentation/javascript，似乎 MapWidget 不是谷歌地图的东西：)
我在 HEAD 中包含了 google 脚本，而在 BODY 底部包含了 jquery 脚本。我想注意到我可以在 COORDS 字段中看到谷歌地图。但它不是小部件。因为 OpenLayers 小部件有点停留在 Google 地图下。
这可能就是我收到验证错误“未提供几何值”的原因...因为我单击 GMap，但表单需要来自 OpenLayers 小部件的值...这是我的建议跨度>
How to hook up GMap to GeoDjango?的可能重复
是的..它是重复的，但我没有得到答案，并决定做一些不同的新帖子..我只是不知道如何删除帖子..？

标签： django google-maps google-maps-api-3 geodjango

【解决方案1】：

在 HEAD 中添加 {{ form.media }} 已从 Chrome 控制台中消除了错误“未捕获的 ReferenceError：MapWidget 未定义”。但它并没有解决问题 - 请看 - GeoDjango Google Maps - error - No geometry value provided

【讨论】：