リーフレットの凡例の地図が定義されていません

Question

私はリーフレットに凡例を追加しようとしています。私は非常に簡単にすべきだと私はそれを複数回試したことを知っています。しかし、私は伝説を表示することはできません。

他のプロジェクトのいずれかで凡例のスニペットをコピー/ペーストすると、画面上に凡例が表示されます。私が問題だったかを見るために私のリーフレットマップと一緒にFirebugのを走っ

：

あなたがバン上記を参照として、「マップ」は未定義です。これは、コードにlegend.addTo(map)を追加した場合にのみ当てはまります。私がスニペットを削除すると、コード全体が完全に実行され、（たとえ私が変数 'マップ'を複数の場所で使用していても）「マップ」エラーがなくなります。

leaflet.src.jsファイルに問題があるようですが、私はそれを混乱させたくありません。

問題を発見した誰かの希望で私のコードをすべて含めました。私は数日間、伝説に取り組んできました。私は絶望的になり始めています。何らかの理由legend.addTo(map)については

// 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)を実行する前に、終了しているかどうかを確認するには、次のコードを使用しました：適切

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