Vue-CLI and Leaflet （4）添加tooltips 和 popup

2024-02-14 04:55:28

在上一篇文章中，我们分享了点、线、面的添加，本文将分享基础的信息绑定。

在 Leaflet 中使用 Tooltips

Leaflet 的 tooltips 可以让您在地图上添加交互式工具提示。它们非常适合提供有关地图上不同元素的更多信息，例如标记或多边形。

要在地图上添加工具提示，请按照以下步骤操作：

在 HTML 中，为您的 Leaflet 地图创建一个容器元素。
在 JavaScript 中，创建一个 Leaflet 地图对象并将其添加到容器元素。
创建一个 Leaflet 工具提示对象并将其添加到地图。
将工具提示与地图上的元素相关联。

以下是一个使用 Leaflet 工具提示的示例：

<div id="map"></div>

// 创建地图对象
var map = L.map('map').setView([51.505, -0.09], 13);

// 创建工具提示对象
var tooltip = L.tooltip({
  direction: 'right'
});

// 将工具提示与标记相关联
var marker = L.marker([51.505, -0.09]).bindTooltip('这是一个标记', {
  tooltip
});

// 将标记添加到地图
marker.addTo(map);

在 Leaflet 中使用 Popups

Leaflet 的 popup 可以让您在地图上添加交互式弹出窗口。它们非常适合显示有关地图上不同元素的更多信息，例如标记或多边形。

要在地图上添加弹出窗口，请按照以下步骤操作：

在 HTML 中，为您的 Leaflet 地图创建一个容器元素。
在 JavaScript 中，创建一个 Leaflet 地图对象并将其添加到容器元素。
创建一个 Leaflet 弹出窗口对象并将其添加到地图。
将弹出窗口与地图上的元素相关联。

以下是一个使用 Leaflet 弹出窗口的示例：

<div id="map"></div>

// 创建地图对象
var map = L.map('map').setView([51.505, -0.09], 13);

// 创建弹出窗口对象
var popup = L.popup();

// 将弹出窗口与标记相关联
var marker = L.marker([51.505, -0.09]).bindPopup('这是一个标记', {
  closeOnClick: false
});

// 将标记添加到地图
marker.addTo(map);