Почему я получаю TypeError: L.Control.Draw не является ошибкой конструктора? - PullRequest
Новая
       3

Почему я получаю TypeError: L.Control.Draw не является ошибкой конструктора?

2 голосов
/ 16 июня 2019

Я пишу код для карт листовки с плагином 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>

Ответы [ 2 ]

1 голос
/ 18 июня 2019

Проблема в том, что вы пытаетесь использовать плагин Leaflet Freedraw с API плагина Leaflet.draw .

Выберите один или другой (из ваших комментариев,звучит так, как будто вам нужна функция freedraw) и вставьте его API и документацию.

1 голос
/ 17 июня 2019

Вы найдете ниже исправленный код:

что вам нужно, это 

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

Это нормально?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...