Question

我正在使用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>

Answer 1

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

您需要的是

<!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>

可以吗？

Answer 2

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

选择一项（从您的评论中，听起来您需要使用freedraw功能）并保留其API和文档。

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

2 个答案: