2016-09-19 88 views
0

我正忙于使用传单编写简单的地图实现,但是我遇到了一些障碍。我正在设置我的地图,并添加了一个自定义控件,以根据选择的复选框显示标签(这将显示弹出窗口)。单张打开多个弹出窗口而不绑定到标记

我的自定义控件,像这样:

 var checkBoxControl = L.Control.extend({ 
      options: { 
       position: 'topright' 
      }, 
      onAdd: function (map) { 
       var container = L.DomUtil.create('input', 'leaflet-control'); 

       container.style.backgroundColor = 'white'; 
       container.id = 'labels_checkbox'; 
       container.style.width = '30px'; 
       container.style.height = '30px'; 
       container.label = "Labels"; 
       container.type = 'checkbox'; 

       container.onclick = function() { 
        var checkBox = $("#labels_checkbox"); 
        var checkBoxValue = checkBox[0]; 
        var labelsChecked = checkBoxValue.checked; 
        var bounds = mymap.getBounds(); 

        for (var i = 0; i < markers.length; i++) { 
         marker = markers[i].mark; 

         if (bounds.contains(marker.getLatLng())) { 
          var previewLabel = markers[i].previewLabel; 
          if (labelsChecked == true) { 
           console.log('previewLabel', previewLabel); 
           mymap.addLayer(previewLabel).fire('popupopen'); 
          } else { 
           previewLabel.close(); 
          } 
         } 
        } 

       }; 
       return container; 
      } 
     }); 

我可以看到按我的控制台,它是获取所有周围的标记,不过地图将无法打开这些标记?

有没有办法让我打开一个弹出窗口而不绑定到标记?

谢谢

回答

1

您必须更改L.Map行为以防止自动关闭弹出窗口。 这是讨论here

// prevent a popup to close when another is open 
    L.Map = L.Map.extend({ 
    openPopup: function (popup, latlng, options) { 
     if (!(popup instanceof L.Popup)) { 
     var content = popup; 

     popup = new L.Popup(options).setContent(content); 
     } 

     if (latlng) { 
     popup.setLatLng(latlng); 
     } 

     if (this.hasLayer(popup)) { 
     return this; 
     } 

     // NOTE THIS LINE : COMMENTING OUT THE CLOSEPOPUP CALL 
     //this.closePopup(); 
     this._popup = popup; 
     return this.addLayer(popup);   
    } 
}); 

看到这个example

+0

非常感谢!这就是诀窍! – liamjnorman

+0

优秀。如果它对你有帮助,请接受答案。 – YaFred

相关问题