在Django模板中包含Leaflet.js

Question

我正在编写一个Django应用程序，该应用程序显示某些具有相关性和经度的对象的属性。当有人点击对象名称时，我希望能够向他们显示对象所在的地图。我尝试将leaflet.js的地图直接包含在我的对象详细视图的模板中，如下所示：

{% extends "base_generic.html" %}

 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="  crossorigin=""/>

{% block content %}
<div id="mapid" style="width: 10px; height: 10px;"></div>

<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>

<script>
  var mymap = L.map('mapid').setView([51.505, -0.09], 13);

  L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
   attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
  maxZoom: 18,
  id: 'mapbox.streets',
  accessToken: '<my-token-here>'
}).addTo(mymap);

 </script>

{% endblock %}

但这给了我看起来最奇怪的地图 - 它分成了几块，我似乎可以在网页上自由移动到随机点（见下文并一直向下滚动，你会看到休息在中间）。有谁能说出原因？