leafletJS设置标点后点击标点弹出信息框位置超出浏览器可视区后向反方向弹出信息框

需求描述

• 【问题】点击地图标点弹出信息框，如果标点靠近浏览器窗口边界，信息框就会被遮挡，
• 【需求】靠近浏览器边界的信息框展示时反方向展示
• 【解决】地图容器宽/高 - 点击标点位置的x/y 是否小于信息框宽/高，小于的话 信息框的 left / top 减去信息框宽/高

代码展示

addMakersToMap() {
  let layers = [] // 为清除图标做准备
  this.markers.forEach((item) => {
    if (item.jd && item.wd) {
    var marker = new L.marker([item.wd, item.jd], {
      ...
    }).on('click', (e) => {
      console.log('e----', e)
      console.log('"点击图标"----', '点击图标')
      // 【主要代码】
      setTimeout(() => {
        /**** 点击位置 x y 值 ****/
        const clickX = e.containerPoint.x
        const clickY = e.containerPoint.y
        /**** 页面地图大盒子 ****/
        const mapDom = document.getElementById('map')
        const mapDomWidth = mapDom.offsetWidth
        const mapDomHeight = mapDom.offsetHeight

        /**** 点击标点图标弹框 ****/
        // popup 初始位置 left 65  top 10
        const popupDom = document.getElementsByClassName('popup')[0]
        const popupDomWidth = popupDom.offsetWidth
        const popupDomHeight = popupDom.offsetHeight
        // const popupDomLeft = popupDom.offsetLeft
        // const popupDomTop = popupDom.offsetTop

        /**** 标点图标宽高 ****/
        const iconWidth = document.getElementsByClassName('leaflet-marker-icon')[0].offsetWidth + 10

        /**** 是否超出浏览器可视区域 ****/
        const isOverflowRight = mapDomWidth - clickX < popupDomWidth
        const isOverflowBottom = mapDomHeight - clickY < popupDomHeight
        /**** 超出浏览器可视区域 - 重新设置位置大小 ****/
        // const rightToLeft = (popupDomLeft - popupDomWidth - iconWidth) + 'px'
        // const bottomTotop = (popupDomTop - popupDomHeight) + 'px'
        const rightToLeft = (65 - popupDomWidth - iconWidth) + 'px' // 65为popup容器初始left
        const bottomTotop = (10 - popupDomHeight) + 'px' // 10为popup容器初始top

        // 判断是否超出右侧
        if(isOverflowRight) {
          popupDom.style.left = rightToLeft
        }
        // 判断是否超出右下
        if(isOverflowRight && isOverflowBottom) {
          popupDom.style.left = rightToLeft
          popupDom.style.top = bottomTotop
        }
        // 判断是否超出下
        if(isOverflowBottom) {
          popupDom.style.top = bottomTotop
        }
      }, 10);
    })

    /**** 点击图标弹出信息框 start ****/
    ...
    /**** 点击图标弹出信息框 end ****/
    ...
    }
  })
  ...
},

效果展示