Django传单地图未出现在detailview中

我试图使用传单在django网站上的一个详细视图页面上显示地图。加载页面时，我没有收到任何错误。其他所有内容都会显示，但地图不会显示，也不会显示地图的占位符

设置：

"""
Django settings for crowdfunding project.

Generated by 'django-admin startproject' using Django 1.11.6.

For more information on this file, see
https://docs.djangoproject.com/en/1.11/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/1.11/ref/settings/
"""

import os

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/1.11/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = '_=@ti6j%*!5fcg-c#=f29yy7-unusuk*)oi7neew#k8==8rgz8'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = []


# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'application.apps.ApplicationConfig',
    'leaflet'
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'crowdfunding.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ['./templates',],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'crowdfunding.wsgi.application'

LEAFLET_CONFIG = {
    'DEFAULT_CENTER': (0, 0),
    'DEFAULT_ZOOM': 16,
    'MIN_ZOOM': 3,
    'MAX_ZOOM': 18,
}


# Database
# https://docs.djangoproject.com/en/1.11/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
}


# Password validation
# https://docs.djangoproject.com/en/1.11/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]


# Internationalization
# https://docs.djangoproject.com/en/1.11/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'EST'

USE_I18N = True

USE_L10N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.11/howto/static-files/

STATIC_URL = '/static/'

# Redirect to home URL after login
LOGIN_REDIRECT_URL = '/'

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

型号：

    class Report(models.Model):
        """
        Model representing reports. Reports are associated with the Company User that created them
        """
        title = models.CharField(max_length=254, default='null')
        author = models.ForeignKey(User,default=0)
        customGroup = models.ManyToManyField(CustomGroup, help_text="User Groups")
        created_on = models.DateTimeField(auto_now_add=True)
        companyName = models.CharField(max_length=254, default='null')
        companyPhone = models.CharField(max_length=12, default='null')
        companyLocation = models.CharField(max_length=254, default='null')
        companyCountry = models.CharField(max_length=254, default='null')
        sector = models.CharField(max_length=254, default='null')
        industry = models.CharField(max_length=254, default='null')
        currentProjects = models.TextField(max_length=254, default='null')
        public = models.CharField(max_length=254, default='null')
        comments = models.TextField(max_length=254, default='null')
        #document1 = models.FileField(upload_to='documents/', default='null')
        #document2 = models.FileField(upload_to='documents/', default='null')
        #document3 = models.FileField(upload_to='documents/', default='null')
        #document4 = models.FileField(upload_to='documents/', default='null')
        #document5 = models.FileField(upload_to='documents/', default='null')
        # id = models.UUIDField(primary_key=True, default=uuid.uuid4, help_text="Unique ID for this particular report")

        def __str__(self):
            """
            String for representing the Model object (in Admin site etc.)
            """
            return self.title

        def get_absolute_url(self):
            """
            Returns the url to access a particular report instance.
            """
            return reverse('report_detail', args=[str(self.id)])

注意，我在这里使用视图文件中的geocoder模块为我的地图提供位置。我已经测试了这个部件，我知道 观点：

以下是“我的视图”页面的两个相关模板。第一个是一个通用模板，它是我网站的基础，里面有边栏之类的东西。第二个文件扩展了第一个文件，即传单地图应该显示的位置

模板“base_generic.html”：

<!DOCTYPE html>
{% load leaflet_tags %}
<html lang="en" xmlns="">

<head>

  {% block title %}<title>Crowdfunding</title>{% endblock %}
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



  <!-- Add additional CSS in static file -->
  {% load static %}
  <link rel="stylesheet" href="{% static 'css/styles.css' %}">
</head>

<style>
    .leaflet-container {  /* all maps */
        width:  600px;
        height: 400px;
    }
</style>



<body>

  <div class="container-fluid">

    <div class="row">
      <div class="col-sm-2">
      {% block sidebar %}
      <ul class="sidebar-nav">
          <li><a href="{% url 'index' %}">Home</a></li>
      {% if user.is_authenticated %}
      <li>User: {{ user.get_username }}</li>
    <li><a href="{% url 'create_report' %}">Create Report</a></li>
    <li><a href="{% url 'search' %}">Report Search</a></li>
    <li><a href="{% url 'my_reports' %}">My Profile</a></li>
    <li><a href="{% url 'group_search' %}"> Search Groups </a></li>
    <li><a href="{% url 'create_message' %}">Create message</a></li>
    <li><a href="{% url 'my_messages' %}">View Messages ({{ user.my_unread_messages}})</a></li>
    {% if perms.application.can_add_group %}
    <li><a href="{% url 'create_group'%}">Create a group</a></li>
    {% endif %}
    {% if perms.auth.can_change_group %}
    <li><a href="{% url 'give_sm_status'%}">Give site manager status</a></li>
    {% endif %}
    {% if perms.auth.can_change_user %}
    <li><a href="{% url 'modify_access'%}">Revoke/restore user access</a></li>
    {% endif %}
    <li><a href="{% url 'logout'%}?next={{request.path}}">Logout</a></li>
      {% else %}
      <li><a href="{% url 'login'%}?next={{request.path}}">Login</a></li>
      <li><a href="{% url 'signup'%}?next={{request.path}}">Sign Up</a></li>
      {% endif %}
      </ul>
     {% endblock %}
      </div>
      <div class="col-sm-10 ">
      {% block content %}{% endblock %}
      </div>
    </div>

  </div>
</body>
</html>

{%加载传单\标签%}
{%block title%}众筹{%endblock%}
{%load static%}
.传单容器{/*所有地图*/
宽度：600px；
高度：400px；
}
{%块边栏%}


{%if user.u经过身份验证%}
用户：{{User.get_username}






{%if perms.application.can\添加\组%}

{%endif%}
{%if perms.auth.can_change_group%}

{%endif%}
{%if perms.auth.can\ u change\ u user%}

{%endif%}

{%else%}


{%endif%}

{%endblock%}
{%block content%}{%endblock%}

模板“report_detail.html”：

{% extends "base_generic.html" %}
{% load leaflet_tags %}
<head>
    {% leaflet_css %}
    {% leaflet_js %}
</head>
<style>
    #map_id {
        height: 180px;
        width:  180px;
    }
</style>

<script type="text/javascript">
    function map_init(map,options) {
        map.setView(location.latlng, 13);
        L.marker(location.latlng).addTo(map);

        return map

    }
</script>



{% block content %}
    <h1>Title: {{ report.title }}</h1>

    <p><strong>Owner:</strong> <a href="#">{{ report.author }}</a></p> <!-- author detail link not yet defined -->
    <p><strong>Company:</strong> {{ report.companyName }}</p>
    <p><strong>Company Phone:</strong> {{ report.companyPhone }}</p>
    <p><strong>Company Location:</strong> {{ report.companyLocation}}</p>
    <p><strong>Company Country:</strong> {{ report.companyCountry }}</p>
    {% leaflet_map "mymap" callback='window.map_init' %}

    <p><strong>Sector:</strong> {{ report.sector }}</p>
    <p><strong>Industry:</strong> {{ report.industry }}</p>
    <p><strong>Current Projects:</strong> {{ report.currentProjects }}</p>
    <p><strong>Comments:</strong> {{ report.comments }}</p>
    <p><strong>Supplementary Files:</strong><br />
        {% for r in repFiles %}
          {% if r.report == report  %}
          <a href="{{ r.document.url }}">{{ r.document.name }}</a><br />
          {% endif %}
        {% endfor %}

    <td><a href='edit/'><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-pencil" aria-hidden="true">
        </span> Edit </button> </a> </td>
    <td><a href='deleted/'><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-pencil" aria-hidden="true">
        </span> Delete </button> </a> </td>



{% endblock %}

{%extensed“base_generic.html”%}
{%加载传单\标签%}
{%传单\u css%}
{%传单_js%}
#地图编号{
高度：180像素；
宽度：180px；
}
函数映射\初始化（映射，选项）{
地图setView（位置latlng，13）；
L.标记（位置、板条）。添加到（地图）；
返回图
}
{%block content%}
标题：{{report.Title}
所有者：

公司：{{report.companyName}

公司电话：{{report.companyPhone}

公司地址：{{report.companyLocation}

公司所在国家：{{report.companyCountry}

{%传单映射“mymap”回调='window.map\u init'%}
扇区：{{report.Sector}

行业：{{report.Industry}

当前项目：{{report.currentProjects}

评论：{{report.Comments}

补充文件：

{%r在repFiles%}
{%if r.report==report%}


{%endif%}
{%endfor%}
{%endblock%}

{% extends "base_generic.html" %}
{% load leaflet_tags %}
<head>
    {% leaflet_css %}
    {% leaflet_js %}
</head>
<style>
    #map_id {
        height: 180px;
        width:  180px;
    }
</style>

<script type="text/javascript">
    function map_init(map,options) {
        map.setView(location.latlng, 13);
        L.marker(location.latlng).addTo(map);

        return map

    }
</script>



{% block content %}
    <h1>Title: {{ report.title }}</h1>

    <p><strong>Owner:</strong> <a href="#">{{ report.author }}</a></p> <!-- author detail link not yet defined -->
    <p><strong>Company:</strong> {{ report.companyName }}</p>
    <p><strong>Company Phone:</strong> {{ report.companyPhone }}</p>
    <p><strong>Company Location:</strong> {{ report.companyLocation}}</p>
    <p><strong>Company Country:</strong> {{ report.companyCountry }}</p>
    {% leaflet_map "mymap" callback='window.map_init' %}

    <p><strong>Sector:</strong> {{ report.sector }}</p>
    <p><strong>Industry:</strong> {{ report.industry }}</p>
    <p><strong>Current Projects:</strong> {{ report.currentProjects }}</p>
    <p><strong>Comments:</strong> {{ report.comments }}</p>
    <p><strong>Supplementary Files:</strong><br />
        {% for r in repFiles %}
          {% if r.report == report  %}
          <a href="{{ r.document.url }}">{{ r.document.name }}</a><br />
          {% endif %}
        {% endfor %}

    <td><a href='edit/'><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-pencil" aria-hidden="true">
        </span> Edit </button> </a> </td>
    <td><a href='deleted/'><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-pencil" aria-hidden="true">
        </span> Delete </button> </a> </td>



{% endblock %}