VUE BAIDU MAP覆盖物 - 自定义覆盖物手记

前言

覆盖物的最高级就是自定义覆盖物，而往往业务中就必须用自定义覆盖物，因为都用上了地图这么吊的组件了，覆盖物也必须华丽、高度定制。

官网

https://dafrok.github.io/vue-baidu-map/#/zh/index

Github

https://github.com/Dafrok/vue-baidu-map

自定义覆盖物手册

手册：https://dafrok.github.io/vue-baidu-map/#/zh/overlay/overlay

效果

效果核心其实是三角箭头的阴影，其他都很好说。说起三角的阴影，其实就是看你对box-shadow是否精通，原则上是上方的2条边不能出现shadow，下方的shadow要贴近大容器的shadow，混为一体。

方案一，有宽高容器背景染色，加旋转加shadow：

有宽高容器背景染色，加旋转加shadow

方案二，无宽高容器利用border染色，加旋转加shadow：

无宽高容器利用border染色，加旋转加shadow

这两个方案都差不多，主要考察你是不是对shadow调试的更好。

方案一，有宽高容器背景染色

解释一下left: 113.7px;，它的计算方法是：

250 / 2 = 125 算出中心点

√(16 * 16 * 2)是斜边的长度，大约等于22.6，一半等于11.3

125 - 11.3 = 113.7就是left: 113.7px;

.bm-overlay {
  width: 250px;
  height: 80px;
  line-height: 1.6;
  background-color: #fff;
  box-shadow: 0 0 5px #ccc;
  border-radius: 8px;
  padding: 10px;
  position: relative;
  font-size: 0;
  &::after {
    position: absolute;
    content: "";
    transform: rotate(45deg);
    width: 16px;
    height: 16px;
    font-size: 0;
    position: absolute;
    background-color: #fff;
    box-shadow: 5px 5px 5px -5px #ccc;
    bottom: -8px;
    left: 113.7px;
  }

  .logo {
    width: 60px;
    height: 60px;
    margin: 0 10px 0 0;
    vertical-align: top;
  }
  .inline-block {
    width: 160px;
    vertical-align: top;
  }
  .title {
    color: #333;
    font-size: 14px;
    font-weight: bold;
  }
  .contents {
    color: 666;
    font-size: 12px;
  }
}

方案二，无宽高容器利用border染色

.bm-overlay {
  width: 250px;
  height: 80px;
  line-height: 1.6;
  background-color: #fff;
  box-shadow: 0 0 5px #ccc;
  border-radius: 8px;
  padding: 10px;
  position: relative;
  font-size: 0;
  &::before {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    font-size: 0;
    position: absolute;
    transform: rotate(45deg);
    border-width: 8px;
    border-style: solid dashed dashed;
    border-color:  transparent #fff #fff transparent;
    box-shadow: 1px 1px 1px #ccc;
    bottom: -8px;
    left: 113.7px;
  }

  .logo {
    width: 60px;
    height: 60px;
    margin: 0 10px 0 0;
    vertical-align: top;
  }
  .inline-block {
    width: 160px;
    vertical-align: top;
  }
  .title {
    color: #333;
    font-size: 14px;
    font-weight: bold;
  }
  .contents {
    color: 666;
    font-size: 12px;
  }
}

el.style.left 的偏移量

    draw({ el, BMap, map }) {
      const pixel = map.pointToOverlayPixel(
        new BMap.Point(114.628239, 38.041396)
      )
      el.style.left = pixel.x + 'px'
      el.style.top = pixel.y + 'px'
    },

这里el.style.left和el.style.top要设偏移，默认是左上角。

先说x轴，应偏移半个大容器宽度，125。el.style.left = pixel.x - 125 + 'px'

再说y轴，应偏移整个大容器高度加上三角容器斜边一半，上面有计算过，是11.3，所以是91.3。el.style.top = pixel.y - 91.3 + 'px'