Leaflet开发笔记-Tooltip

本文主要是介绍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  有四个小三角都要调整。

 

这篇关于Leaflet开发笔记-Tooltip的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---