單圖像 - 遺漏的類型錯誤：無法讀取屬性未定義

Question

我動態生成mapbox地圖「匹配」，但是當我要添加這段代碼：

https://www.mapbox.com/mapbox.js/example/v1.0.0/leaflet-image/ 

此錯誤消息顯示出來：

Uncaught TypeError: Cannot read property 'match' of undefined

這裏是我的代碼：

function geoChart(idCh,title,unit,year){ 

console.log(dataTabArr[idCh]); 

$("#chart_div_"+idCh).html(""); 
$("#chart_div_"+idCh).html("<div id='map_"+idCh+"' style='height:400px;width:100%'></div>"); 

L.mapbox.accessToken = 'pk.eyJ1IjoiamFyZGExOTg5IiwiYSI6ImNpamJobG1yaTAwYzl0d2tuaHVqdnFxZDUifQ.NG4IVy4E9Apnp2H5vWlzXQ'; 

max_lat = -999; max_lon = -999; 
min_lat = 999; min_lon = 999; 

map = L.mapbox.map("map_"+idCh, "mapbox.light"); 

for(var i=1;i<dataTabArr[idCh][0].length;i++) { 

    var city = dataTabArr[idCh][0][i]; 
    /****************************Výpočet hodnot jednotlivých měst**************************/ 
     valsum = 0; 

     for(var j=1;j<dataTabArr[idCh].length-1;j++){ 
      //console.log("i: "+i+",j: "+j); 
      if (dataTabArr[idCh][j][0]== year+",Q1" && dataTabArr[idCh][0][i] == cities[i-1]){ 
       valsum = dataTabArr[idCh][j][i]; 
       //console.log("hodnota:"+valsum); 
      } 
     } 
    /************************************************************/ 

    if (dataTabArr[idCh][0][i]=="StPetersburg") city="Saint Petersburg"; 
    if (dataTabArr[idCh][0][i]=="Duesseldorf") city="dusseldorf"; 

    var address = 'https://api.mapbox.com/v4/geocode/mapbox.places/' + city + '.json?access_token=' + L.mapbox.accessToken; 

    features =[]; 
    $.ajaxSetup({ async: false }); 

    $.getJSON(address, function (data) { 

     lat = data['features'][0]['center'][0]; 
     lon = data['features'][0]['center'][1]; 
     console.log(lon + ',' + lat); 

     if (lat < min_lat) min_lat = lat; 
     if (lon < min_lon) min_lon = lon; 
     if (lat > max_lat) max_lat = lat; 
     if (lon > max_lon) max_lon = lon; 


     var valsum2 = parseFloat(valsum); 
     valsum2 = valsum2.toFixed(2); 
     var t = valsum2/1000; 
     var s = valsum2%1000; 
     var des = valsum2%1; 
     console.log("formát: "+t+", "+s+"."+des); 

     var cssIcon = L.divIcon({ 

      className: 'css-icon', 
      html: '<div class="hoverMe" style=""><b style="letter-spacing: 1px;font-size:15px;">'+city+'</b><p style="margin: 0;">'+valsum2+'</p></div>' 
     }); 
     L.marker([lon, lat], {icon: cssIcon}).addTo(map); 

    }); 

} 


myLayer = L.mapbox.featureLayer().addTo(map); 

myLayer.on("layeradd", function (e) { 
    marker = e.layer, feature = marker.feature; 
    marker.setIcon(L.icon(feature.properties.icon)); 
    content = feature.properties.title + '<br>'+ feature.properties.description; 
    marker.bindPopup(content); 
    marker.openPopup(content); 
}); 


map.fitBounds([[min_lon-0.1,min_lat-0.1],[max_lon+0.1,max_lat+0.1]]); 

    /****************************BUTTONS & MAIN Label************************************************/ 
    if (unit) unit = "/(in "+unit+")"; 
    var innerDiv = document.createElement('div'); 
    innerDiv.className = 'block_'+idCh; 
    innerDiv.style.margin = "15px 0px"; 
    innerDiv.style.minHeight = "40px"; 
    innerDiv.innerHTML = generateButtons(idCh); 


    $("#chart_div_"+idCh).prepend(innerDiv); 
    $(".block_"+idCh).prepend("<div class='mapLabel' style='vertical-align: middle;line-height:40px;float:left;font-family: Arial;font-size: 15;font-weight: bold;stroke: none;stroke-width: 0'>"+title+unit+"</div>"); 


    /******************************************** GENERATING RANGE ******************************************/ 
    var chartWidth = parseFloat($("#chart_divs").width()).toFixed(0); 
    var yearWidth = (chartWidth)/(yearto-yearfrom+1); 
    var quartalWidth = (chartWidth-20)/(((yearto-yearfrom+1)*4)-1); 
    console.log(yearWidth+" - "+quartalWidth); 

    var timeline = "<div id='timeline' style='height:22px;width:100%;'>"; 
    var timelineYears = "<div id='timelineYears' style='display:inline-flex;height:30px;width:100%;'>"; 
    var quartNum = ""; 

    for(var o=yearfrom; o<=yearto; o++){ 

     for(var p=1; p<=4; p++){ 
      if (o==yearto && p==4){ 
      timeline = timeline.concat("<div class='barItem' style='background:url(icons/timeline.png) no-repeat bottom right;float:left;height:30px;width:19px;'>Q"+p+"</div>"); 
      }else{ 
      timeline = timeline.concat("<div class='barItem' style='background:url(icons/timeline.png) no-repeat bottom left;float:left;height:30px;width:"+quartalWidth+"px;'>Q"+p+"</div>"); 
      } 
     } 
     timelineYears = timelineYears.concat("<div id='barItemYears' class='timelineYears' style='text-align: center;height:20px;width:"+(yearWidth)+"px;'>"+o+"</div>"); 
    } 

    //getYear(idCh,year); 

    var timeline = timeline.concat("</div>"); 
    $('.block_'+idCh).after("<div style='height: 63px;' class='timelineYears' id='barBlock_"+idCh+"'></div>"); 
    $('#barBlock_'+idCh).append(timelineYears); 
    $('#barBlock_'+idCh).append(timeline); 

    var maxval = ((yearto-yearfrom+1)*4)-1; 
    var range = '<input style="z-index:999;top: -17px;width:'+chartWidth+'" type="range" class="mapTimeline" id="'+idCh+'" min="0" max="'+maxval+'" value="0" list=mapsettings>'; 
    console.log($(".range-field").text()); 

    $('#barBlock_'+idCh).append(range); 

    /***********Changing Z index*********/ 
    $(".hoverMe").mouseenter(function() { 
     zindex = $(this).parent().css("z-index"); 
     $(this).parent(".leaflet-clickable").css("z-index",9999); 
    }); 

    $(".hoverMe").mouseleave(function() { 
     $(this).parent().css("z-index", zindex); 

    }); 
} 

Answer 1

快速瀏覽我看到L.divIcon在你的代碼。文檔https://github.com/mapbox/leaflet-image#requirements提到L.divIcon將不會包含在輸出中。在實踐中，雖然我發現它會導致你看到的錯誤。