Question

我正在动态生成mapbox地图，但是当我想添加这段代码时：

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

此错误消息显示：

未捕获的TypeError：无法读取未定义的属性“匹配”

这是我的代码：

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不会包含在输出中。在实践中虽然我发现它会导致你看到的错误。

leaflet image - 未捕获的TypeError：无法读取undefined的属性'match'

1 个答案: