javascript - 当图标大小设置为 0,0 时删除传单 divIcon "dot"

Question

我有以下内容:

var myLatLng = new L.LatLng(lat, lng);
var labelIcon = L.divIcon(
   {
        iconSize: [0, 0],
        html: "<div style='font-family:arial; margin-left:0px; margin-top:0px; font-size:" + fontSize + "px;'>" + labelText + "</div>"
   });
var myMarker = L.marker(myLatLng, { icon: labelIcon, riseOnHover: false, draggable: true, ID: labelID });

当它出现在我的 map 上时，我让 div 中的文本出现，但随后有一个小点，我认为，图标的大小为 0,0。我试图设置 div 的不透明度，但这不会影响图标的不透明度。有没有办法消除或隐藏标记留下的“点”？

Answer 1

iconSize 不是创建 divIcon 所必需的。您可以改为传入 className，然后通过 CSS 设置大小。这是 Leaflet 文档的链接 detailing the options available.这是一个代码片段。 labels 只是我用 geojson.io 创建的 geoJSON .我将 geoJSON 保存到一个变量中，稍后对其进行迭代并添加到 map，这是一个 Leaflet map 。

var labels = {
"type": "FeatureCollection",
"features": [
      {
    "type": "Feature",
    "properties": {
      "name": "Juneau"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [
        -134.42115783691406,
        58.30209338988363
      ]
    }
  },
  {
    "type": "Feature",
    "properties": {
      "name": "Fort Yukon"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [
        -145.27410507202148,
        66.5648589947054
      ]
    }
  }
};

labels.features.forEach(function(feature) {
  return L.marker(
    [feature.geometry.coordinates[1], feature.geometry.coordinates[0]], {
    icon: L.divIcon({
      className: 'label',
      html: feature.properties.name
    })
  }).addTo(map);
});

此外，这是我最近用来设置 map 样式的 CSS。您需要将光标更改为 inherit，这样它就不会变成指针。 text-shadow 为文本提供浅黑色轮廓，使标签在 map 上更加明显。

.label {
  font-family: 'IM Fell DW Pica', serif;
  color: #fec623;
  font-size: 150%;
  line-height: 20px;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  cursor: inherit;
}