Leaflet 学习心路历程之 —— 自定义 Popup 基础教学（自定义Marker标记气泡）

Leaflet 自定义 Popup  （自定义Marker标记气泡）

 

之前在写项目的过程中遇到一个这样的需求，找了很多文章都没有能直接解决这个问题

我们开始解决问题吧：

首先我们在地图上加载marker 这里就不过多描述了 直接进入正题  先把popup这一块的文档放在这里

Options参数选项

Option参数	参数类型	默认值	说明
maxWidth	Number	300	弹窗的最大宽度，单位为像素
minWidth	Number	50	弹窗的最小宽度，单位为像素
maxHeight	Number	null	如果设置，如果内容超过此高度时，则在弹出窗口中显示滚动条。
autoPan	Boolean	true	如果您不希望地图进行平移动画以适应打开的弹出窗口， 请将其设置为false。
autoPanPaddingTopLeft	Point	null	执行自动平移后，弹窗和地图视图左上角之间的边距。
autoPanPaddingBottomRight	Point	null	执行自动平移后，弹窗和地图视图右下角之间的边距。
autoPanPadding	Point	Point(5, 5)	相当于将左上角和右下角的自动平移填充设置为相同的值。
keepInView	Boolean	false	如果你想防止用户在屏幕打开时弹出屏幕上的弹出窗口，将其设置为true.
closeButton	Boolean	true	弹窗中是否存在关闭按钮
closeOnClick	Boolean	*	如果要覆盖用户在地图上单击的弹出窗口关闭的默认行为，请设置它。默认为Map的closePopupOnClick选项。
autoClose	Boolean	true	如果在打开另一个弹窗时，是否自动关闭之前的弹窗.
className	String	''	要分配给弹窗的自定义的css类名

我们要用到的就是 className 参数

• 添加/新增 Marker

let marker = L.marker([50.5, 30.5]).addTo(map)

• 给 Marker 添加 Popup 气泡

marker.bindPopup("我是popup").openPopup(); // openPopup 是自动打开气泡

• 我们给气泡绑定 自定义class 并将内容填写进去

marker.bindPopup(`<span class="cd-span">发布消息</span>
                            <span class="cd-span">当前信息</span>
                            <span class="cd-span">实时状态</span>`, { className: 'mypopup' }).addTo(map)

• 接下来设置 mypopup 改变popup位置  有一些关闭按钮，包括气泡下方的小三角指示表都可以通过css属性display:none 搞定

  /* popup弹窗位置 */

  .mypopup {
    bottom: -120px !important;
    left: -81px !important;
  }

• 这里是我气泡摸样的css   我个人的思路是这样的 ：

1. 首先将气泡变成圆形，然后将背景色设置为透明
2. 给圆形增加边框
3. 文字 、分割线 都是用的定位  这里分割线我用伪类写的利用偏移将它勉强看着舒服一点（不要在意细节没有精准三等分）

 .mypopup .leaflet-popup-content-wrapper {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border: 55px solid rgb(83, 115, 145);
    background-color: rgba(0, 0, 0, 0.24);
  }

  .cd-span {
  position: absolute;
  width: 30px;
  font-size: 14px;
  text-align: center;
  line-height: 15px;
}

.cd-span:nth-child(1) {
  color: #fff;
  top: 13px;
  left: 65px;
}

.cd-span:nth-child(1):active {
  color: rgb(152, 199, 218);
}

.cd-span:nth-child(1):before {
  content: "";
  position: absolute;
  width: 40px;
  height: 1px;
  border-bottom: 1px dashed rgb(180, 193, 204);
  transform: translate3d(40px, 41px, 0px) rotate(-33deg);
}

.cd-span:nth-child(2) {
    color: #fff;
    top: 92px;
    left: 20px;
}

.cd-span:nth-child(2):active {
  color: rgb(152, 199, 218);
}

.cd-span:nth-child(2):before {
  content: "";
  position: absolute;
  width: 40px;
  height: 1px;
  border-bottom: 1px dashed rgb(180, 193, 204);
  transform: translate3d(-6px, -39px, 0px) rotate(30deg);
}

.cd-span:nth-child(3) {
    color: #fff;
    top: 92px;
    left: 110px;
}

.cd-span:nth-child(3):active {
  color: rgb(152, 199, 218);
}

.cd-span:nth-child(3):before {
  content: "";
  position: absolute;
  width: 40px;
  height: 1px;
  border-bottom: 1px dashed rgb(180, 193, 204);
  transform: translate3d(-50px, 40px, 0px) rotate(-90deg);
}

最后希望大家遇到跟我同样的问题可以少走一些弯路