传单图例图未定义

Question

我一直在尝试为我的传单地图添加图例。我知道我应该很容易，而且我已经尝试了很多次。但是，我无法显示图例。

当我 copy/paste 我的其他项目之一中的图例片段时，我确实在屏幕上看到了图例。

我运行Firebug和我的传单图一起看看是什么问题：

正如您在上面看到的，'map' 未定义。只有在我的代码中添加 legend.addTo(map) 时才会出现这种情况。如果我删除该片段，整个代码运行完美，我不会再收到 'map' 错误（即使我仍然在多个地方使用变量 'map'）。

leaflet.src.js 文件似乎有问题，但我不想弄乱它。

我包含了我的所有代码，希望有人能找到问题所在。我已经为传说工作了几天，我开始感到绝望。

    // globale variabelen
    var map,
        tab1,
        fields = ["id", "x", "y", "keten", "name"], 
        autocomplete = [];

    $(document).ready(initialize);

    function initialize(){
        $("#map").height($(window).height());

        map = L.map("map", {
            center: L.latLng(53.21587, 6.556676 ),
            zoom: 12
        });

        var tileLayer = L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(map);

        getData();

    };

    function getColor(keten) {
        return  keten == "MacDonalds"   ? '#800888' :
                keten == "Subway"       ? '#969696' :
                keten == "KFC"          ? '#081d58' :
                keten == "BurgerKing"   ? '#006837' :
                keten == "Dominos"      ? '#fed976' :
                keten == "NYPizza"      ? '#fed976' :
                                          '#252525' ;
        }

    function getData(){
        $.ajax("php/getData.php", {
            data: {
                table: "fastfood_groningen",
                fields: fields
            },
            success: function(data){
                mapData(data);
            }
        })
    };

                map.eachLayer(function(layer){
                    //if niet de tile layer
                    if (typeof layer._url === "undefined"){
                        map.removeLayer(layer);
                    }
                });

                // Aanmaken van een geojson container object
                var geojson = {
                    "type": "FeatureCollection",
                    "features": []
                };

                var dataArray = data.split(", ;");
                dataArray.pop();

            console.log(dataArray);

                dataArray.forEach(function(d){
                    d = d.split(", "); 

                    var feature = {
                        "type": "Feature",
                        "properties": {}, //properties object container
                        "geometry": JSON.parse(d[fields.length]) //parse geometry
                    };

                    // Hiermee definieer je de lengte van 1 feature die in dit geval gelijk is aan de lengte van velden.
                    for (var i=0; i<fields.length; i++){
                        feature.properties[fields[i]] = d[i];
                    };

                    // De feature namen worden toegevoegd waarna de list wordt ge-autocomplete 
                    if ($.inArray(feature.properties.keten, autocomplete) == -1){
                        autocomplete.push(feature.properties.keten);
                    };

                    geojson.features.push(feature);
                });
            console.log(geojson);

                //activatie van de autocomplete on keten input
                $("input[name=keten]").autocomplete({
                    source: autocomplete
                });


            window["mapDataLayer"] = L.geoJson(geojson, {
                    pointToLayer: function (feature, latlng) {
                        var markerStyle = { 
                            fillColor: getColor(feature.properties.keten),
                            color: "#FFF",
                            fillOpacity: 0.5,
                            opacity: 0.8,
                            weight: 1,
                            radius: 8
                        };

                        return L.circleMarker(latlng, markerStyle);
                    },
                    onEachFeature: function (feature, layer) {
                        var html = "";
                        for (prop in feature.properties){
                            html += prop+": "+feature.properties[prop]+"<br>";
                        };
                        layer.bindPopup(html);
                    }
                }).addTo(map);

    };

       // Custom layerpanel --WORK IN PROGRESS!
            $( "input[value=mapDataLayer]" ).click(function( event ) {
                layerClicked = window[event.target.value];
                    if (map.hasLayer(layerClicked)) {
                        map.removeLayer(layerClicked);
                    }
                    else{
                        map.addLayer(layerClicked);
                    } ;
            });


    function submitQuery(){
        //Haal de data van het formulier op
        var formdata = $("form").serializeArray();

        var data = {
            table: "fastfood_groningen",
            fields: fields
        };
        formdata.forEach(function(dataobj){
            data[dataobj.name] = dataobj.value;
        });

        $.ajax("php/getData.php", {
            data: data,
            success: function(data){
                mapData(data);
            }
        })
    };

    ;

//legend controls and info
var legend = new L.control({position: 'bottomright'});

legend.onAdd = function (map) {
    var div = L.DomUtil.create('div', 'info legend'),
        grades = [0.00001, 0.7300001, 2.9900001, 6.700001],
        labels = ['Legend (Value = CO2 per Capita)'],
        from, to;

    labels.push('<i style="background: #eeedd8"></i> ' + 'No Data Available');

    for (var i = 0; i < grades.length; i++) {
       from = grades[i];
       to = grades[i + 1];

        labels.push('<i style="background:' + getColor(from + '1' ) + '"></i> ' + from + (to ? '&ndash;' + to : '&ndash;43.893036'));
    }

    div.innerHTML = labels.join('<br>');
    return div;
};

legend.addTo(map);

Answer 1

出于某种原因 legend.addTo(map) 运行得非常早，尽管它是我代码的最后一行。

在运行 legend.addTo(map):[=13=之前，我使用了下面的代码来检查某个函数（初始化）是否已经完成]

 $.when($.ajax(initialize())).then(function () {
     legend.addTo(map);
 });

传单图例图未定义

Leaflet legend map undefined

javascript

leaflet