首页 / 浏览问题 / WebGIS / 问题详情
leaflet的popup如何自定义内容样式?
7EXP 2022年07月30日

使用产品:iclient-leaflet

问题详细描述:

我在vue2组件中的地图上使用了leaflet的popup组件,我通过设置html字符串设置popup的内容,其中有一个按钮具有class名。我在当前vue的style标签中,设置按钮的css样式,但是并没有起作用。

// map.vue  组件
<script>
//....核心代码
// popup内容
const popupContent =
'<h3>详情</h3>' +
'<p>' + '<b>地址:</b>' + null + '</p>' +
'<p>' + '<b>电话:</b>' + null + '</p>' + +
'<button class="popupBtn" style="width: 100%;background-color:none">' + '按钮' + '</button>'

// 实例化popup对象并设置内容
const popupTemplate = L.popup)_
popupTemplate.setContent(popupContent)
layer.bindPopup(popupTemplate)
</script>

<style>
.popupBtn {
  //...一些样式
}
</style>

请问我要如何操作才能为该按钮设置css样式,因为css样式比较复杂,所以不能使用document.getElementByclass.style一个一个设置css样式,太过复杂

1个回答

您好,这个不从iclient的产品角度去进行修改,而是从vue本身的样式控制比较容易实现,

比如vue的样式穿透,https://blog.csdn.net/weixin_45468454/article/details/106094385

也可以参考这个文档来进行调整,https://blog.csdn.net/supermapsupport/article/details/90676753

希望可以帮助到您。

10,523EXP 2022年08月01日
...