在mapbox中过滤标记之后,弹出窗口不再起作用 [英] Popups no longer function after filtering markers in mapbox

查看:254
本文介绍了在mapbox中过滤标记之后,弹出窗口不再起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我已经从Mapbox中的外部geoJson文件中设置了功能,并按照 https://www.mapbox.com/mapbox.js/example/v1.0.0/custom-popup/

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

myLayer.eachLayer(function(layer){

//设置每个标记的弹出窗口
var content =;
var props =
var imagePart =< img class ='popupPic'src ='images / thumbnails /+ props.filename +'>< / img>;
var infoPart =< h3 class ='popupInfo'>+ props.bldgName +< / h3>< p> +
props.architect +< br />+道具.year +< / p>;
content = imagePart + infoPart;

layer.bindPopup(content,{closeButton:false});
});

弹出窗口设置为在鼠标悬停时显示...

  myLayer.on('mouseover',function(e){
e.layer.closePopup();
e.layer.openPopup );
});
$ b myLayer.on('mouseout',function(e){
e.layer.closePopup();
});

我还设置了过滤功能,以显示 https://www.mapbox.com/mapbox.js/example/v1.0.0/filtering -markers /

  function chooseBldg(){
var bldgs = document.getElementById(buildingTypeMenu )。值;

if(bldgs ==all){
myLayer.setFilter(function(f){return true;});

$ b $ else {
myLayer.setFilter(function(f){
return f.properties ['buildingType'] === bldgs;
});




$ b

当我第一次显示页面时,弹出窗口显示正确,并且筛选器正确选择要显示的标记的子集,但在筛选器被触发后,弹出窗口不再在鼠标悬停上显示。过滤器完成后,是否需要重新绑定弹出窗口(通过显式触发eachLayer函数或其他)?

解决方案

重新绑定弹出窗口为我解决了这个问题。

I have set up features from an external geoJson file in Mapbox and bound popups to these features following the example at https://www.mapbox.com/mapbox.js/example/v1.0.0/custom-popup/

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

myLayer.eachLayer(function(layer) {

    // set up popup for each marker
    var content = "";
    var props = layer.feature.properties;
    var imagePart = "<img class='popupPic' src='images/thumbnails/" + props.filename + "' ></img>";
    var infoPart = "<h3 class='popupInfo'>" + props.bldgName + "</h3><p>" +
        props.architect + "<br />" + props.year + "</p>";
    content = imagePart + infoPart;

    layer.bindPopup(content, {closeButton: false});
});

The popups are set up to display on mouseover...

myLayer.on('mouseover', function(e) {
    e.layer.closePopup();
    e.layer.openPopup();
});

myLayer.on('mouseout', function(e) {
    e.layer.closePopup();
});

I have also set up filtering to display selected features following the example at https://www.mapbox.com/mapbox.js/example/v1.0.0/filtering-markers/

function chooseBldg(){
    var bldgs = document.getElementById("buildingTypeMenu").value;

    if(bldgs == "all") {
        myLayer.setFilter(function(f) {return true;});

    }
    else {
        myLayer.setFilter(function(f) {
            return f.properties['buildingType'] === bldgs;
        }); 
    }
}

The popups display correctly when I first display the page, and the filters correctly select the subset of markers to display, but after the filter has been triggered the popups no longer display on mouseover. Do I need to rebind the popups (by explicitly triggering the eachLayer function or something) after the filter has been done?

解决方案

Rebind popups solved this problem for me.

这篇关于在mapbox中过滤标记之后,弹出窗口不再起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆