为什么我会收到TypeError:L.Control.Draw不是构造函数错误

我正在使用freedraw插件编写传单地图的代码。目前，我正在尝试添加选项菜单来编辑绘制的形状。但是突然间我遇到了这个错误：

TypeError： L.Control.Draw 不是构造函数

我不仅不知道应该如何解决这个问题，而且我不知道为什么首先会发生此错误。

我尝试环顾互联网，包括堆栈溢出，但没有任何解决方案......

有谁知道这个错误是关于什么的，我应该如何解决它？

我尝试将其添加到我的代码中：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.2/leaflet.draw.css"/> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.2/leaflet.draw.js"></script>
var map = L.map('mapid', { drawControl: true }).setView([25, 25], 2);

这似乎没有做任何其他事情，只是给了我另一个错误 L 没有定义。我已将数字更改为引发上述错误的实际版本。实际链接适用于有效的旧版本，但我对这可能引发的其他问题感到好奇。甚至控制台也警告过我这一点。

<!DOCTYPE html>
<html>
<head>
    <title>Simple Leaflet Map</title>
    <meta charset="utf-8" />
    <link
            rel="stylesheet"
            href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
    />
    <script
            src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js">
    </script>
    <script
            src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.freedraw/2.0.1/leaflet-freedraw.web.js">
    </script>
</head>
<body>
<div id="mapid"></div>

<style>
    #mapid{
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
</style>

<script>
    var map = L.map('mapid', { drawControl: true }).setView([50.100500, 14.395497], 18);
    L.tileLayer('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}{r}.{ext}', {
        ext: 'png',
        maxZoom: 18,
        attribution: 'Wikimedia maps | Map data &copy; <a target="_blank" href="https://openstreetmap.org/copyright">OSM contributors</a>'
    }).addTo(this.map);
    var editableLayers = new L.FeatureGroup();
    map.addLayer(editableLayers);
    var MyCustomMarker = L.Icon.extend({
        options: {
            shadowUrl: null,
            iconAnchor: new L.Point(12, 12),
            iconSize: new L.Point(24, 24),
            iconUrl: 'link/to/image.png'
        }
    });
    var options = {
        position: 'topright',
        draw: {
            polyline: {
                shapeOptions: {
                    color: '#f357a1',
                    weight: 10
                }
            },
            polygon: {
                allowIntersection: false, // Restricts shapes to simple polygons
                drawError: {
                    color: '#e1e100', // Color the shape will turn when intersects
                    message: '<strong>Oh snap!<strong> you can't draw that!' // Message that will show when intersect
                },
                shapeOptions: {
                    color: '#bada55'
                }
            },
            circle: false, // Turns off this drawing tool
            rectangle: {
                shapeOptions: {
                    clickable: false
                }
            },
            marker: {
                icon: new MyCustomMarker()
            }
        },
        edit: {
            featureGroup: editableLayers, //REQUIRED!!
            remove: false
        }
    };
    var drawControl = new L.Control.Draw(options);
    map.addControl(drawControl);
    map.on(L.Draw.Event.CREATED, function (e) {
        var type = e.layerType,
            layer = e.layer;
        if (type === 'marker') {
            layer.bindPopup('A popup!');
        }
        editableLayers.addLayer(layer);
    });
</script>

</body>
</html>

问题是您尝试将 Leaflet Freedraw 插件与 Leaflet.draw 插件的 API 一起使用。

选择一个或另一个(从您的评论中，听起来您需要 freedraw 功能(并粘贴其 API 和文档。

您可以在下面找到经过更正的代码：

你需要的是

<!DOCTYPE html>
<html>
<head>
    <title>Simple Leaflet Map</title>
    <meta charset="utf-8" />
    <link
            rel="stylesheet"
            href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
    />
    <script
            src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js">
    </script>
    <script
            src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.freedraw/2.0.1/leaflet-freedraw.web.js">
    </script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.2/leaflet.draw.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.2/leaflet.draw.js"></script>
</head>
<body>
<div id="mapid"></div>
<style>
    #mapid{
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
</style>
<script>
    var map = L.map('mapid', { drawControl: true }).setView([50.100500, 14.395497], 18);
    L.tileLayer('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}{r}.{ext}', {
        ext: 'png',
        maxZoom: 18,
        attribution: 'Wikimedia maps | Map data &copy; <a target="_blank" href="https://openstreetmap.org/copyright">OSM contributors</a>'
    }).addTo(this.map);
    var editableLayers = new L.FeatureGroup();
    map.addLayer(editableLayers);
    var MyCustomMarker = L.Icon.extend({
        options: {
            shadowUrl: null,
            iconAnchor: new L.Point(12, 12),
            iconSize: new L.Point(24, 24),
            iconUrl: 'link/to/image.png'
        }
    });
    var options = {
        position: 'topright',
        draw: {
            polyline: {
                shapeOptions: {
                    color: '#f357a1',
                    weight: 10
                }
            },
            polygon: {
                allowIntersection: false, // Restricts shapes to simple polygons
                drawError: {
                    color: '#e1e100', // Color the shape will turn when intersects
                    message: '<strong>Oh snap!<strong> you can't draw that!' // Message that will show when intersect
                },
                shapeOptions: {
                    color: '#bada55'
                }
            },
            circle: false, // Turns off this drawing tool
            rectangle: {
                shapeOptions: {
                    clickable: false
                }
            },
            marker: {
                icon: new MyCustomMarker()
            }
        },
        edit: {
            featureGroup: editableLayers, //REQUIRED!!
            remove: false
        }
    };
    var drawControl = new L.Control.Draw(options);
    map.addControl(drawControl);
    map.on(L.Draw.Event.CREATED, function (e) {
        var type = e.layerType,
            layer = e.layer;
        if (type === 'marker') {
            layer.bindPopup('A popup!');
        }
        editableLayers.addLayer(layer);
    });
</script>
</body>
</html>

可以吗？

相关内容

最新更新

热门标签：