Django集成Leaflet时地图不显示且控制台无报错问题求助

你的代码存在3个直接导致地图无法渲染的问题，逐一修复即可：

• 地图容器高度无效：#mapid的行内样式写为height:450，缺少长度单位，浏览器解析后容器实际高度为0，Leaflet无法在0高度容器内完成渲染，这是Leaflet最常见的无报错不显示诱因。
• 初始化函数从未执行：你把onload="init"绑定在普通div元素上，div不支持onload事件，该事件仅对body、资源类标签（img、script、iframe等）生效，因此写在main.js里的初始化逻辑从来没有被触发，控制台自然不会抛出相关错误。
• 资源引入逻辑错误：一是把CSS的link标签写在了<style>标签内部，属于无效语法；二是把Leaflet JS、自定义main.js放在了头部CSS块中，脚本加载时页面还未渲染出#mapid容器，就算触发初始化也会找不到目标节点。

修正后代码 #

模板文件 templatefile.html #

{% extends 'elec_meter/base.html' %}
{% load static %}
{% block title %}Geolocalisation des compteurs - Interactiv {% endblock %}
{% block titre %} Carte {% endblock %}
{% block css %}
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
       integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
       crossorigin=""/>
    <link href="{% static 'assets/css/style.css' %}" rel="stylesheet" />
<style>
#mapid {
    height: 450px;
}
</style>
{% endblock %}

{% block content %}
    <div class="row">
        <div id="mapid"></div>
    </div>
{% endblock %}

{% block extra_js %}
<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
       integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
       crossorigin=""></script>
<script src="{% static 'assets/js/main.js' %}"></script>
<script>
document.addEventListener('DOMContentLoaded', init)
</script>
{% endblock %}

注意：如果你的base模板没有定义extra_js块，把底部的脚本挪到content块末尾即可，核心是保证脚本在#mapid节点渲染完成后再加载执行。

地图初始化脚本 main.js #

原有逻辑无需修改，保持如下即可：

function init(){
    const coordGabon = {
        lat: -0.803689,
        lng: 11.609444
    }
    const zoomLevel = 13;
    const mymap = L.map('mapid').setView([coordGabon.lat, coordGabon.lng],zoomLevel);
    const mainLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '© OpenStreetMap'
    }).addTo(mymap);
}

验证方式 #

修改完成后刷新页面，可先在浏览器控制台做两步检查：

1. 输入L回车，若返回Leaflet构造对象说明JS资源加载正常
2. 输入document.getElementById('mapid').offsetHeight回车，若返回450说明容器高度生效
   两项检查都通过的话地图即可正常加载显示。

内容的提问来源于stack exchange，提问作者leauradmin