Leaflet GeoJSON Uncaught TypeError：无法读取未定义的属性（读取“x”）

Question

我有以下代码在此处和 jsfiddle 中工作，以使用通过单击地图触发的函数将 GeoJSON LineString 添加到传单地图。

 // get base map tiles var map = L.map('map').setView([30, 1], 7); L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); var data = { "type": "FeatureCollection", "features": [{ "id": "0", "type": "Feature", "properties": {}, "geometry": { "type": "LineString", "coordinates": [ [ 1, 30 ], [ 2, 31 ] ] } }] } map.on('click', function(e) { L.geoJSON(data).addTo(map); });

 #map { width: 400px; height: 300px; background-color: black; }

 <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"></script> <link href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" rel="stylesheet" /> <div id="map"></div>

问题是我无法让这段代码在 Django 应用程序中或在 jsfiddle 之外按预期工作。 我目前有一个包含以下代码的 html 文件，该代码包含在父 html 文件中。

{% load static %}
<link rel="stylesheet" type="text/css" href="{% static '/css/map.css' %}">
<link rel="stylesheet" type="text/css" href="//unpkg.com/leaflet/dist/leaflet.css">
<script src="//unpkg.com/leaflet/dist/leaflet.js"></script>

<div id="map"></div>
<script src="{% static '/js/map.js' %}"></script>

地图按预期加载，但是当我单击地图激活该功能时，出现以下错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'x')
    at m.intersects (Bounds.js:135:27)
    at i._clipPoints (Polyline.js:251:42)
    at i._update (Polyline.js:296:8)
    at i._reset (Path.js:140:8)
    at i.onAdd (Path.js:85:8)
    at i._layerAdd (Layer.js:114:8)
    at i.whenReady (VM32 leaflet.js:5:42397)
    at i.addLayer (VM32 leaflet.js:5:65406)
    at i.eachLayer (LayerGroup.js:122:11)
    at i.onAdd (LayerGroup.js:106:8)

该问题是由 Bounds.js 中未定义 min2 引起的。

任何帮助将不胜感激:)

Answer 1

事实证明，问题是由于地图已经初始化导致边界未定义。 这个答案解决了这个问题 - 我只需要将它添加到 js 文件的顶部：

var container = L.DomUtil.get('map');
if (container != null) {
    container._leaflet_id = null;
}