Question

我已经构建了一个Mapbox地图，它具有相当复杂的自定义弹出结构，包括照片和格式。我正在使用.csv文件和杂食动物来提供我的数据，并创建弹出窗口.on ready。我还有一个搜索框，可以使用jQuery搜索数据。

独立地，每个人都有效。弹出窗口加载正常，搜索工作正常。但是在使用搜索功能进行过滤后，我会丢失弹出窗口。

我看过这个similar post，但似乎没有任何建议。我认为这与我的弹出变量包含在.on ready函数中有关。这里有什么我想念的吗？我是否需要重新构建弹出窗口的创建方式？

这是我的代码：

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

jQuery('#search').keyup(search);

加载数据，格式化弹出窗口：

var csvLayer = omnivore.csv('Stats.csv', null, L.mapbox.featureLayer())
    .on('ready', function() {

        map.fitBounds(csvLayer.getBounds(), {paddingTopLeft: [0,25]});

 function updownFormat(updown, change){
            if (updown === '&#8212;') {
                return "No change ";
            } else if (updown === "N/A") {
                return "New store - no data ";
            } else if (updown === '&#9650;') {
                return '<span class="upPercent">' + updown + "</span> " + change;
            } else {
                return '<span class="downPercent">' + updown + "</span> " + change;
            }
        };

        csvLayer.eachLayer(function(layer) {
            var prop = layer.feature.properties
            var popup = '<div class="popup"><h3>'+ prop.storename +'<\/h3>' +
            '<h4>'+ prop.town +'</h4>' +
            '<p><b>Rank:</b> #'+ prop.rank +' (of 80 stores) <br>' +
            '<b>Sales: </b>' + prop.money14 +' (2014)<br>' + 
            '<b>Growth: </b>' + updownFormat(prop.updown, prop.change) + ' (from 2013)</p>' +
            '<h5>Best selling bottles (2014)</h5>' + 
            '<img src="'+ prop.pop1img +'" class="liquorimg">' +
            '<ol><li><b>'+prop.pop1+'</b></li><li>'+prop.pop2+'</li><li>'+prop.pop3+'</li><li>'+prop.pop4+'</li><li>'+prop.pop5+'</li></ol></div>';
            layer.bindPopup(popup);

        });


    })
    .addTo(map);

搜索功能：

function search() {
    // get the value of the search input field
    var searchString = jQuery('#search').val().toLowerCase();

    csvLayer.setFilter(showStoreTown);

    function showStoreTown(feature) {
        return feature.properties.storetown
            .toLowerCase()
            .indexOf(searchString) !== -1;
    }
}

Answer 1

修正了，感谢Twitter！在“准备好”上设置地图边界并在“addlayer”上设置弹出窗口创建可以解决它。

过滤后重新绑定Mapbox弹出窗口

1 个答案: