Question

那我该如何解决这个错误呢？ “未捕获的ReferenceError：L未定义” var map = L.map（“map”）。setView（[60.201424,24.934037]，12）;

以下是Javascript的其余部分：

var map = L.map（“map”）。setView（[60.201424,24.934037]，12）;

    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 layergroup = L.layerGroup().addTo(map);
    var activeMarker;

    $("#addmarker").click(function() {

        var mapCenter = map.getCenter();

        var geojsonFeature = {
            "type": "Feature",
            "properties": {
                "name": "",
                "typ": "nur",
                "reichweite": ""
            },
            "geometry": {
                "type": "Point",
                "coordinates": [mapCenter.lat, mapCenter.lng]
            }
        };

        var geojsonlayer = L.geoJson(geojsonFeature, {

            pointToLayer: function(feature, latlng) {
                var marker = L.marker(map.getCenter(), {
                    draggable: true,
                }).bindPopup("<div id='titel'>Unbenannter Marker</div><input type='button' value='Delete Marker' class='marker-delete-button'/><br><p>Name:<input type='text' id='setname'/><button class='trigger'>Say hi</button>");

                marker.on("popupopen", onPopupOpen);

                return marker;
            }
        });

        layergroup.addLayer(geojsonlayer.getLayers()[0]); // use the only marker instead of the GeoJSON layer.

    });

    // Function to handle delete as well as other events on marker popup open
    function onPopupOpen() {

        activeMarker = this;

        $(".marker-delete-button:visible").click(function() {
            layergroup.removeLayer(activeMarker);
            activeMarker = null;
        });

        $("#setname").val(activeMarker.feature.properties.name).change(modifyName);
    }

    function modifyName(event) {
        var newName = event.currentTarget.value;

        activeMarker.feature.properties.name = newName;
    }

    function getAllMarkers() {
        /*var allMarkersObjArray = []; //new Array();
        var allMarkersGeoJsonArray = []; //new Array();

        $.each(map._layers, function(ml) {
          //console.log(map._layers)
          if (map._layers[ml].feature && map._layers[ml].feature.properties.typ == "nur") {

            allMarkersObjArray.push(this);
            allMarkersGeoJsonArray.push(JSON.stringify(this.toGeoJSON()));
          }
        })*/

        var allMarkersObjArray = layergroup.getLayers();
        var allMarkersGeoJsonArray = [];

        layergroup.eachLayer(function(layer) {
            allMarkersGeoJsonArray.push(JSON.stringify(layer.toGeoJSON()));
            // You could also have used layergroup.toGeoJSON(), but it would have given a FeatureCollection, whereas here you get an array of Feature's.
        });

        console.log(allMarkersObjArray);
        alert("Anzahl Markers : " + allMarkersGeoJsonArray.length + "\n\n" + allMarkersGeoJsonArray + "\n\n");
    }

    $("#getAllMarkers").click(function() {
        getAllMarkers();
    });
</script>

所以我想创建一个应用程序，你点击地图并插入带有消息的标记。

Answer 1

我假设您正在使用leafletjs库来渲染该地图。

请按照本指南确保您在开始之前准备好了您的页面： https://leafletjs.com/examples/quick-start/

因此，您需要在页面中加入：

css文件;
js file;
将<div id="map"></div>添加到您网页的正文中;
然后才添加您的代码。

享受！

未捕获的ReferenceError：L未定义

1 个答案: