Leaflet 自定义Popup弹窗

最新推荐文章于 2025-05-09 07:54:47 发布

原创

最新推荐文章于 2025-05-09 07:54:47 发布 · 9.4k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript

首先感谢 Leaflet - 自定义弹出框（popup）提供的扩展

但是实际结合组件化的使用过程中，对于弹窗内元素的高宽存在不确定性（即初始化时不传入容器的宽高），所以需要进一步对Popup组件进行拓展，以便适应更自由的窗体组件

稍微解读了下Leaflet对于popup组件的源代码，其实popup对于整体的地图容器来说，也只是地图上根据像素位置定位的元素之一，因此对其的控制也和其它图层一样，对初始化、更新、层级变化做监听，修改位置和样式即可，以下是代码（ES5）

// 重写setTransform，由于不再固定宽度，所以增加translateX(-50%)水平居中
function setTransform(el, offset, scale) {
   
   
  var pos = offset || new L.Point(0, 0);
  el.style[L.DomUtil.TRANSFORM] =
    (L.Browser.ie3d
      ? "translate(" + pos.x + "px," + pos.y + "px,0) translateX(-50%)"
      : "translate3d(" + pos.x + "px," + pos.y + "px,0) translateX(-50%)") +
    (scale ? " scale(" + scale + ")" : "");
}
// 因为重写了setTransform，所以setPosition也要重新指向方法
function setPosition(el, point) {
   
   
  el._leaflet_pos = point;
  if (L.Browser.any3d) {
   
   
    setTransform(el, point);
  } else {
   
   
    el