Leaflet.label 技术文档

Leaflet.label 技术文档

Leaflet.label Leaflet.label is plugin for adding labels to markers & shapes on leaflet powered maps. 项目地址: https://gitcode.com/gh_mirrors/le/Leaflet.label

Leaflet.label 是一个为基于 Leaflet 的地图上添加标注（labels）到标记点和形状的插件。然而请注意，从 Leaflet 1.0 开始，L.Label 已被核心功能中的 L.Tooltip 所取代，因此本插件已废弃。尽管如此，对于想了解其历史特性和过渡到新版本的开发者，以下内容依然有价值。

安装指南

由于 Leaflet.label 插件已被弃用，推荐直接使用 Leaflet 1.0 及以上版本中的 L.Tooltip。要使用 Leaflet，可以通过 npm 安装：

npm install leaflet

或者，在 HTML 文件中直接通过 CDN 链接引入 Leaflet.js。

对于旧代码需要继续运行的情况，建议查看上面提供的升级路径，将 bindLabel 等方法替换为 bindTooltip 相应的方法，并调整相关选项以匹配新 API。

项目的使用说明

基础使用

标记点上的标签

L.marker([纬度, 经度]).bindTooltip('这里是标注文本').addTo(map);

路径上的标签

L.polyline([
    [纬度1, 经度1],
    [纬度2, 经度2],
]).bindTooltip('路径标注').addTo(map);

始终显示的标签

设置 permanent: true 来让标签一直显示。

L.marker([纬度, 经度]).bindTooltip('始终可见的标注', { permanent: true }).addTo(map);

项目API使用文档

• bindTooltip: 将提示绑定到对象上。

  • 参数: (字符串, {options}) - 文字内容及其配置项。
  • 示例: marker.bindTooltip('我的标注')

• openTooltip: 显示绑定的提示。

  • 示例: marker.openTooltip()

• closeTooltip: 隐藏当前的提示。

  • 示例: marker.closeTooltip()

• options 中可用的关键字有：

  • interactive: 是否可点击，默认 false。
  • permanent: 是否总是显示，默认 false。
  • className: 自定义CSS类名。
  • direction: 提示的方向（左 | 右 | 自动），默认 自动。
  • pane: 指定标签所在的地图层，默认分别为 markerPane 或 popupPane。
  • offset: 从图标位置偏移量，默认 [12,-15]。
  • opacity: 标签的不透明度，默认 1。
  • zoomAnimation: 缩放动画效果，默认 true。

设置标签的不透明度

marker.getTooltip().setOpacity(opacityValue);

确保在 Leaflet 1.x 中正确使用 getTooltip() 方法获取 tooltip 实例。

注意事项

对于以前依赖于 Leaflet.label 的项目，重要的是进行相应的迁移，更新代码以兼容 L.Tooltip 的最新特性和默认设置。考虑升级后的新特性，如对路径的支持、新的定位方向等，可以优化用户体验。

以上内容是基于 Leaflet.label 插件的历史信息转换至当前最佳实践的指导，强调了向 Leaflet 的现代特性的平滑过渡。

Leaflet.label Leaflet.label is plugin for adding labels to markers & shapes on leaflet powered maps. 项目地址: https://gitcode.com/gh_mirrors/le/Leaflet.label