Leaflet开发笔记-Tooltip

Tooltip图层显示文本。官网API文档地址:https://leafletjs.com/reference-1.5.0.html#tooltip

一些配置参数请查阅官方文档。下面举例项目开发中常用方法。

基本用法:marker.bindTooltip("my tooltip text").openTooltip(); //里面内容可以填写html字符串 

打开显示文本:marker.openTooltip();

关闭显示文本:marker.closeTooltip();

最常见的场景:如何改变提示文本的样式?

在绑定时,我们可以添加一个属性 【className】

.leaflet-label{

    background-color:rgba(0, 0, 0, 0.6);
    background-clip: padding-box;
    color: #fff;
    display: block;
    font: 12px/20px "Helvetica Neue", Arial, Helvetica, sans-serif;
    font-weight: bold;
    padding: 1px 3px;
    position: absolute;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    white-space: nowrap;
    z-index: 6;

}

这是效果:(默认是白底黑字,和系统风格不协调,按照美工出图调整的样式)

这里如果你新样式的底色不是白色,你还需要调整一处样式,因为插件自带的提示文本的小三角是白色的。所以你还要打开leaflet.css文件 查看 .leaflet-tooltip-top:before,.leaflet-tooltip-bottom:before,.leaflet-tooltip-left:before,.leaflet-tooltip-right:before  有四个小三角都要调整。

发布了17 篇原创文章 · 获赞 3 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/u013025674/article/details/93491010