leaflet Uncaught TypeError: Cannot read property 'length' of undefined and markerClusters is not defined

Question

我写了一个从服务器获取数据并在地图上显示的代码。在我更改地图代码以添加 LayerGroup() 之前，它一直运行良好。我的地图函数在一个单独的文件中，名为：app.js，聚类函数在 functions.js 中。我想使用不同类型的地图（图层控制）。而且，只要单击“在地图上显示”按钮，聚类功能就应该起作用。我现在的地图代码：

 function Init_Map()
{
var cities = L.layerGroup();

  
    var mbAttr = 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
        '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
        'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
      mbUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';
  
    var satellite   = L.tileLayer(mbUrl, {id: 'mapbox/satellite-v9', tileSize: 512, zoomOffset: -1, attribution: mbAttr}),
        streets  = L.tileLayer(mbUrl, {id: 'mapbox/streets-v11', tileSize: 512, zoomOffset: -1, attribution: mbAttr}),
        Defaultmap = L.tileLayer('http://mt0.google.com/vt/lyrs=p&hl=en&x={x}&y={y}&z={z}&s=Ga', {
            maxZoom: 19,
            attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'}),
        googleHybrid = L.tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}',{
            maxZoom: 20,
            subdomains:['mt0','mt1','mt2','mt3']}),
        googleSat = L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',{
            maxZoom: 20,
            subdomains:['mt0','mt1','mt2','mt3']}),
        googleTerrain = L.tileLayer('http://{s}.google.com/vt/lyrs=p&x={x}&y={y}&z={z}',{
            maxZoom: 20,
            subdomains:['mt0','mt1','mt2','mt3']});

    var map = L.map('map', {
      center: [36.564012,53.060300],
      zoom: 8,
      layers: [satellite, cities, Defaultmap , googleHybrid , googleSat , googleTerrain]
    });
  
    var baseLayers = {
      "نقشه ماهواره ای(گوگل)": googleSat,
      "نقشه هیبریدی": googleHybrid,
      "نقشه ماهواره ای(OSM)": satellite,
      "Streets": streets,
      "نقشه اصلی": Defaultmap,
      "نقشه Terrain": googleTerrain
    };
  
    var overlays = {
      "Cities": cities
    };
  
    L.control.layers(baseLayers, overlays).addTo(map);
}

和我的函数：

function MarkerOnMap(ODO) {

for ( var i = 0; i < ODO.length ; i++ ){
    console.log(ODO);
    var popup = 
                '<br/><b>کد رشته :</b> ' + ODO[i].branchcode +
                '<br/><b>دوره:</b> ' + ODO[i].saleprd +
                '<br/><b>سال :</b> ' + ODO[i].saleyear+
                '<br/><b>موقعیت مکانی:</b> ' + ODO[i].LastX +""+"-"+""+ ODO[i].LastY +
                '<br/><b>فلگ :</b> ' + ODO[i].flag ;


    var marker= L.marker( [ODO[i].LastX, ODO[i].LastY] )
                    .bindPopup( popup );

    markerClusters.addLayer( marker);
}
/*Legend specific*/
    var legend = L.control({ position: "bottomright" });

    legend.onAdd = function(map) {
    var div = L.DomUtil.create("div", "legend");
    div.innerHTML += "<h4>Tegnforklaring</h4>";
    div.innerHTML += '<i style="background: rgba(110, 204, 57, 0.6)"></i><span>خوش مصرف</span><br>';
    div.innerHTML += '<i style="background: rgba(240, 194, 12, 0.6)"></i><span>کم مصرف</span><br>';
    div.innerHTML += '<i style="background: rgba(241, 128, 23, 0.6)#E6E696"></i><span>پر مصرف</span><br>';
    return div;
    };

    legend.addTo(map);

Init_Map ();

}

并在此聚类中调用了映射函数：

    Init_Map ();

谁能告诉我为什么突然收到这个错误？

ODO中的数据是这样的：

var BillingDate = [
          {"branchcode":"668",
          "saleyear":"99",
          "saleprd":"3",
          "LastX":"36.649717",
          "LastY":"52.488193",
          "flag":"1",
          "flag_Title":null
          },
          {
            "branchcode":"669",
          "saleyear":"99",
          "saleprd":"3",
          "LastX":"36.712585",
          "LastY":"52.935543",
          "flag":"1",
          "flag_Title":null
          }
        ];

在我将地图代码更改为现在的样子之前，它可以从服务器读取并向我显示集群标记。地图的旧代码是：

var map = L.map('map').setView( [36.564012,53.060300], 8);
    // add the OpenStreetMap tiles
    L.tileLayer('http://mt0.google.com/vt/lyrs=p&hl=en&x={x}&y={y}&z={z}&s=Ga', {
        maxZoom: 19,
        attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
    }).addTo(map);

在 app.js 中，我有另一个函数从服务器接收数据并将其传递给 MarkerOnMap();:

var OMID_Detail_Object;
function OMID_Detail() {

  var Ajax_URL= Server_IP +'/OHM/Get_Billing_OMID_Detail';
  var Year_Val = GetSelectValue("YearSelect");
  var Prd_Val = GetSelectValue("PrdSelect");
  var Flg_Val = GetSelectValue("flags");

  
  app.request.get(Ajax_URL, { "Token": Token_Data, "SaleYear":Year_Val, "SalePrd":Prd_Val, "Flag":Flg_Val }, function (data)
  {
    OMID_Detail_Object=data;
  },function (er){},"json");
}
function CreateMarkers(){
  OMID_Detail();
  MarkerOnMap(OMID_Detail_Object);
}

数据ODO读取清晰。我用 console.log

检查了它

Answer 1

var OMID_Detail_Object;
function OMID_Detail() {

var Ajax_URL= Server_IP +'/OHM/Get_Billing_OMID_Detail';
var Year_Val = GetSelectValue("YearSelect");
var Prd_Val = GetSelectValue("PrdSelect");
var Flg_Val = GetSelectValue("flags");


app.request.get(Ajax_URL, { "Token": Token_Data, "SaleYear":Year_Val, "SalePrd":Prd_Val, "Flag":Flg_Val }, function (data)
{
OMID_Detail_Object=data;
MarkerOnMap(OMID_Detail_Object);
},function (er){},"json");
}
function CreateMarkers(){
OMID_Detail();
}

以上是稍作修改的代码，另一种方法是使用 async-await 最终目的是让您的 MarkerOnMap 函数等待直到前一个函数完全执行。

leaflet Uncaught TypeError: Cannot read property 'length' of undefined and markerClusters is not defined

leaflet Uncaught TypeError: Cannot read property 'length' of undefined and markerClusters is not defined

javascript

maps

leaflet

leaflet.markercluster