解决方案

Question

我试图显示倒计时器，直到我的每个标记在我的地图上消失。当各自的定时器用完时，标记会消失，但定时器本身并不会像标记本身那样显示在标记下方。我检查了开发者控制台，发现有几个错误：

未捕获的TypeError：无法读取属性＆＃39; innerHTML＆＃39;为null

未捕获的ReferenceError：未定义组件
此错误计数一直在增加，直到它停止在高位数。我猜这是特定计时器用完的时间，因为在该数字停止攀爬后再次记录相同的错误并且数字从1开始并继续攀升。

L.HtmlIcon = L.Icon.extend({options: {},

initialize: function(options) {
    L.Util.setOptions(this, options);
},

createIcon: function() {
    //console.log("Adding pokemon");
    var div = document.createElement('div');
    div.innerHTML =
        '<div class="displaypokemon" data-pokeid="' + this.options.pokemonid  + '">' +
        '<div class="pokeimg">' +
        '<img src="data:image/png;base64,' + pokemonPNG[this.options.pokemonid] + '" />' +
        '</div>' +
        '<div class="remainingtext" data-expire="' + this.options.expire + '"></div>' +
        '</div>';
    return div;
},

createShadow: function() {
    return null;
}
});

var map;

function deleteDespawnedPokemon() {
    var j;
    for (j in shownMarker) {
        var active = shownMarker[j].active;
        var expire = shownMarker[j].expire;
        var now = Date.now();
        if (active == true && expire <= now) {
            map.removeLayer(shownMarker[j].marker);
            shownMarker[j].active = false;
        }
    }
}

function createPokeIcon(pokemonid, timestamp) {
    return new L.HtmlIcon({
        pokemonid: pokemonid,
        expire: timestamp,
    });
}

function addPokemonToMap(spawn) {
    var j;
    var toAdd = true;
    if (spawn.expiration_timestamp_ms <= 0){
            spawn.expiration_timestamp_ms = Date.now() + 930000;
    }
    for (j in shownMarker) {
        if (shownMarker[j].id == spawn.encounter_id) {
            toAdd = false;
            break
        }
    }
    if (toAdd) {
        var cp = new L.LatLng(spawn.latitude, spawn.longitude);
        var pokeid = PokemonIdList[spawn.pokemon_id];
        var pokeMarker = new L.marker(cp, {
            icon: createPokeIcon(pokeid, spawn.expiration_timestamp_ms)
        });
        shownMarker.push({
            marker: pokeMarker,
            expire: spawn.expiration_timestamp_ms,
            id: spawn.encounter_id,
            active: true
        });
        map.addLayer(pokeMarker);
        pokeMarker.setLatLng(cp);
    }
}


//TODO:<--Timer Functions-->//
function calculateRemainingTime(element) {
    var $element = $(element);
    var ts = ($element.data("expire") / 1000 | 0) - (Date.now() / 1000 | 0);
    var minutes = component(ts, 60) % 60,
        seconds = component(ts, 1) % 60;
    if (seconds < 10)
        seconds = '0' + seconds;
    $element.html(minutes + ":" + seconds);
}

function updateTime() {
    deleteDespawnedPokemon();
    $(".remainingtext, .remainingtext-tooltip").each(function() {
        calculateRemainingTime(this);
    });
}
setInterval(updateTime, 1000);
//<--End of timer functions-->//

以下是我JSFiddle的全面情况。

知道我做错了什么吗？

解决方案

感谢用户T Kambi指出了这个问题！

我忘了包含component()功能。

function component(x, v) {
    return Math.floor(x / v);
}

将所有内容都按预期包含在内。

尝试使用Leaflet JS显示和更新地图标记

解决方案

感谢用户T Kambi指出了这个问题！

0 个答案: