自定义leaflet弹窗

最新推荐文章于 2025-03-15 10:04:33 发布

Live&&learn

最新推荐文章于 2025-03-15 10:04:33 发布

阅读量850

点赞数 3

文章标签： leaflet gis

本文链接：https://blog.youkuaiyun.com/weixin_55800388/article/details/142375601

版权

修改leaflet弹窗默认样式

1.自定义弹窗元素

//添加标记点并绑定自定义弹窗，弹窗元素可以封装为一个函数等灵活处理就行
  L.marker([lat, longti], {
       icon: geoIcon, // 设置icon,icon为自定义的图标
     })
       .addTo(this.map)
       .bindPopup('<div>新定义的弹窗</div>')

2.修改leaflet弹窗的默认样式

//以下内容是示例，可以根据自己想更改的效果调整
//弹窗样式
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
  background: url("../../../assets/pop.png") !important;
  width: 307px !important;
  height: 334px !important;
  background-size: 100% 100% !important;
  background-color: rgba(12, 9, 76, 0.4) !important;
}
// 弹窗的上一层元素
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background-color: transparent !important;
  margin: 4px;
  color: #b0bcbb !important;
  box-shadow: none !important;
}
// 弹窗内容元素
.leaflet-popup-content {
  width: 100% !important;
  margin: 0 !important;
}