如何将Google地图与GeoDjango挂钩?

时间:2016-07-01 08:17:29

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

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文件中,我试图将marker的坐标放入我的模型中:

    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的验证错误我可以看到 - &#34;没有提供几何值&#34;

我猜想连接GMap并检查了COORDS字段中的小部件(通过ModelForm的self.fields['coords'].widget中的__init__)并且结果是OpenLayers小部件。

我应该怎么做才能将GMap作为小部件并在实例中保存标记&#coords?

P.S。页面上的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>

1 个答案:

答案 0 :(得分:0)

将{{form.media}}添加到HEAD中已删除了错误&#39; Uncaught ReferenceError:MapWidget未定义&#39;来自Chrome控制台..但它没有解决问题 - 请看 - GeoDjango Google Maps - error - No geometry value provided