谷歌地图API问题:在Django表单字段部件中,版本3.35的问题

2024-06-17 12:17:37 发布

您现在位置:Python中文网/ 问答频道 /正文

在升级到3.35版本后,我对googlemapsapi有一个问题。目标是以一种形式显示地图,以便用户可以定义地理位置。我使用的是django1.11.12和canjs2.0.2。在

下面是代码(为了简单起见,它可以很好地与googlemapsapi版本3.34一起工作,但是在版本3.35中却不能。在

在模型.py在

from django.db import models
from maps.models import JSONField

class Institution(models.Model):
    geolocation = JSONField(blank=True, null=True)

地图/模型.py在

^{pr2}$

地图/表单.py在

from django import forms
from django.conf import settings
from django.contrib.staticfiles.templatetags.staticfiles import static
from django.utils.safestring import mark_safe
from django.template.loader import render_to_string
from django.forms.widgets import Widget

class LatLngWidget(Widget):
    def __init__(self, attrs=None):
        super(LatLngWidget, self).__init__(attrs)
        self.width = 640
        self.height = 480

    def render(self, name, value, attrs=None):
        data = dict(name=name, value=value, width=self.width, height=self.height)
        html = render_to_string("maps/widget.html", data)
        return mark_safe(html)

    def _media(self):
        return forms.Media(css={"all": [static("maps/css/gmap.css"),],},)

    media = property(_media)

在小部件.html在

<div class="map-container" id="geolocation-container">
<div class="map-box">
    <div class="map map-canvas" id="gmap-geolocation"></div>
</div>
</div>

<script src="https://maps.googleapis.com/maps/api/js?v=3.35&key=xxx"></script>

<script type="text/javascript">
    Map = can.Control({
        init: function(el, options) {
            this.map = null;
            this.marker = null;

            this.name = options.name;
            this.lat = options.lat || 0;
            this.lng = options.lng || 0;
            this.zoom = options.zoom || 2;

            this.createMap();
        },

        createMap: function() {
            var data = {
                'name': this.options.name,
                'width': this.options.width,
                'height': this.options.height,
                'lat': this.lat,
                'lng': this.lng,
                'zoom': this.zoom
            };

            var mapOptions = {
                zoom: 5,
                center: {lat: -25.344, lng: 131.036},
            };

            var target = 'gmap-'+this.name;
            console.log(target);

            this.map = new google.maps.Map(document.getElementById(target), mapOptions);
            // This code works with 3.34. Initial map is rendered with 3.35, but without buttons and not updated if zooming.
            // 3.34
            // > gmap-geolocation
            // 3.35
            // > gmap-geolocation
            // > gmap-undefined
            // > Uncaught TypeError: Cannot read property 'firstChild' of null js?v=3.35&key=xxx:70
            // > gmap-undefined

            //this.map = new google.maps.Map(document.getElementById('gmap-geolocation'), mapOptions);
            // This code works with 3.34. This code does not work at all with 3.35 - browser freezes.
        },
    });

    {% autoescape off %}
    var data = {% firstof value "{}" %};
    {% endautoescape %}
    data.name = "{{ name }}";
    data.width = "{{ width }}";
    data.height = "{{ height }}";
    new Map($("#geolocation-container"), data);
</script>

在编辑.html在

<form method="post" action="" enctype="multipart/form-data">
   {% csrf_token %}
   {% formrow form.geolocation %}
</form>

问题似乎出在小部件.html. 再一次,如果整个代码保持不变,只有googlemapsapi从3.34升级到3.35,我会得到错误“uncaughttypeerror:cannotread property‘firstChild’of null”。在

如果您能给我一些建议,我将不胜感激。在


Tags: djangonamefromimportselfmapdatahtml
1条回答
网友
1楼 · 发布于 2024-06-17 12:17:37

通过将CanJS控制函数重命名为“Map”,该问题已得到修复。 如果在小部件.html在

Map = can.Control({

更改为

^{pr2}$

。。。以及用

new Map2($("#geolocation-container"), data);

。。。然后,使用googlemapsjavascriptapiv3.35,一切都恢复正常。在

相关问题 更多 >