Question

我是传单的新手，我想确定它是否可以替代google maps api。

大多数事情看似积极但我想知道如何以简单的方式在标记的图标内写字。目前我只能在附加的弹出窗口中写。

非常感谢您的帮助

Answer 1

简单方法：

L.marker(e.latlng).bindPopup("Latitude :" + e.latlng.lat + "<br/> Longtitude :" + e.latlng.lng).addTo(this);

检查网站上的参考资料：

表示创建标记时要提供的图标。

http://leafletjs.com/reference.html#icon

或

表示使用简单div的标记的轻量级图标元素而不是图像。

http://leafletjs.com/reference.html#divicon

Answer 2

查看L.DivIcon，它允许您使用自定义HTML替换标记图像。

Answer 3

Leaflet图标具有L.DivIcon方法，可让您使用简单的<div>元素而不是图像。您可以使用HTML <div>标签在<img>中设置图片，并使用<span>或任何其他HTML标签添加文本。

const icon = new L.DivIcon({
  className: 'icon-div',
  html: `<img src='./assets/images/icons/icon.png'/>
    <span>ABC</span>`,
});

然后设置图标：

const marker = L.marker([field.Latitude, field.Longitude])
  .setIcon(icon)
  .addTo(this.markerGroup);

您的markerGroup进入图层：

this.layers.push(this.markerGroup);

然后将图层设置为地图。

您可能需要设置样式以正确对齐图像上的文本。以下CSS包含您需要的选择器。

.leaflet-popup-content {
  width: 300px;
}
.leaflet-popup-content img {
  width: 80px;
}
.leaflet-marker-icon img {
  width: 60px;
}
.leaflet-marker-icon span {
  position: absolute;
  font-weight: bold;
  font-size: 1.2rem;
  top: 25px;
  left: 5px;
}

传单标记 - 如何在标记的图标内写入

3 个答案: