Question

我有一个Mapbox要素图层（以geoJSON为源），每个标记都有弹出窗口（带有divIcon）。我们正在调整不同缩放级别的标记图标（使用css）。如何在不同的缩放级别重置弹出窗口的偏移量？

以下是标记和弹出窗口的初始设置（这一切都有效）：

var curOffset = [0,1];

Markers.on('layeradd', function(la) {
  var Icon = la.layer,
  feature = Icon.feature;
  var popupContent = "<some html>"

var popupOptions = {        
    autoPan:true,
    closeButton: false,
    minWidth: 220,
    maxWidth: 220,
    zoomAnimation:true,
    offset: curOffset
  };

 Icon.setIcon(L.divIcon(Iconfeature.properties.icon));

 Markers.bindPopup(popupContent, popupOptions);
});

我试图像这样重置缩放事件的偏移量，但它不起作用：

map.on('zoomend', function(e) {
if (layerOn == true) {
  size = map.getZoom();
  switch (size){
    case 14: console.log("14"); curOffset = [0,5]; break;
     ...
  }
 } 
});

我是否需要关闭然后打开弹出窗口？我尝试过这些问题，但是我遇到了错误。

我从传单Github撰稿人那里得到了这个建议，但是我还没有能够让这个工作成为/

＆＃39;更新popup.options.offset，然后调用私有方法popup._updatePosition。＆＃39;

Answer 1

GitHub Leaflet撰稿人还建议调查刚刚更改事件弹出窗口的css。我的同事和我找到了正确的修改规则，它有效：

map.on('zoomend', function(e) {
    switch (size){  // zoom level

    case 14:  $('.leaflet-popup.leaflet-zoom-animated').css('bottom', '-5px'); $('.leaflet-popup .leaflet-zoom-animated').css('left', '-28px'); break;
     ...

我还必须添加一个额外的检查，以防缩放过程中图层被关闭，代码类似。

Mapbox-动态重置弹出偏移量

1 个答案: