L.marker 图片旁边增加文字

在Leaflet.js地图插件中，`L.marker`通常用于标记地图上的特定位置，并且默认显示的是一个图标。如果你想在图片标记旁边添加额外的文字信息，可以结合使用`L.DivIcon`或者自定义HTML元素，以及`L.marker`的`bindPopup`方法。

以下是一个例子：

// 创建一个自定义的DivIcon，包含图片和文本
var customIcon = L.divIcon({
  iconSize: [40, 40], // 图片大小
  html: '<div class="marker-text"><img src="your-image-url" alt="Marker Image"> <span class="marker-title">Your Text Here</span></div>'
});

// 使用自定义图标创建marker
var marker = L.marker([lat, lon], {icon: customIcon}).addTo(map);

// 当鼠标悬停在marker上时，显示popup
marker.bindPopup('这是你的详细描述', {
  maxWidth: 250, // 设置最大宽度以适应内容
  className: 'custom-popup'
});

在这个例子中，`.marker-text`和`.marker-title`是你可以在CSS中定制样式的选择器，`your-image-url`替换为你需要的实际图片URL。

相关问题

L.polyline设置起始点文字提示

要在 Leaflet 中的 L.polyline 上设置起始点的文字提示，可以使用 L.Marker 和 L.Popup。具体步骤如下：

1. 创建 polyline，并获取其起始点和终止点的经纬度坐标。

2. 使用起始点的经纬度坐标创建一个 L.Marker，并将其添加到地图上。

3. 使用 L.Popup 创建一个弹出框，将要显示的文字提示放入其中。

4. 将弹出框添加到 L.Marker 上。

5. 使用 L.polyline.bindPopup 将弹出框绑定到 polyline 上。

示例代码如下：

// 创建 polyline
var polyline = L.polyline(latlngs, {color: 'red'}).addTo(map);

// 获取起始点经纬度坐标
var startLatLng = polyline.getLatLngs()[0];

// 创建 Marker
var marker = L.marker(startLatLng).addTo(map);

// 创建 Popup
var popup = L.popup()
    .setContent("起点");

// 将 Popup 添加到 Marker 上
marker.bindPopup(popup);

// 将 Popup 绑定到 Polyline 上
polyline.bindPopup(popup);

这样就可以在 L.polyline 的起始点上显示一个文字提示了。