传单地图的第二个标签？

Question

我正在尝试向 Leaflet 地图添加第二个居中标签。这是它目前的样子：

我使用对此 thread 的响应制作了我目前拥有的标签，这是我的代码：

var marker1 = L.marker([25.777085, -80.193935], {icon: redIcon}).addTo(mymap);
var marker2 = L.marker([25.759461, -80.204921], {icon: redIcon}).addTo(mymap);

createLabel(marker1, "Label 1");
createLabel(marker2, "Label 2");

function createLabel(layer, text){
 removeLabel(layer);
    var icon = createStaticLabelIcon(text);
  var testspan = document.createElement("span");
  document.body.appendChild(testspan); 

  testspan.className = "textwidth";
  testspan.style.fontSize = "10px";
  testspan.innerHTML = text;
  var width = testspan.clientWidth +11;
  icon.options.iconAnchor = [width  / 2, -4]; //That the label is centered

  var label = L.marker(layer.getLatLng(),{icon: icon}).addTo(mymap);
  layer.appendedLabel = label;

  document.body.removeChild(testspan); 
}

function removeLabel(layer){
 if(layer.appendedLabel){
        mymap.removeLayer(layer.appendedLabel); //Remove label that connected with marker, else the label will not removed
  }
}

function createStaticLabelIcon(labelText) {
    return L.divIcon({
        className: "leaflet-marker-label",
        html: '<span class="leaflet-marker-iconlabel" style="background: #CB2B3E; color: #FFFFFF;";>'+labelText+'</span>',
        text : labelText,
    });
}

这里是 css:

.leaflet-marker-label {
    width: auto !important;
    height: auto !important;
}

.leaflet-marker-iconlabel {
    background: #fff;
    border-radius: 7px;
    -moz-box-shadow: 0 3px 10px #888;
    -webkit-box-shadow: 0 3px 14px #999;
    box-shadow: 0 3px 10px #888;
    display: block;
    font: 11px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
    padding: 4px 4px;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    white-space: nowrap;
}

.textwidth {
  position: absolute;
  visibility: hidden;
  height: auto;
  width: auto;
  white-space: nowrap; 
  }

任何有关如何在第一个标签下添加第二个标签的帮助，将不胜感激。这是我想要的示例，虽然我不知道如何制作它：

Answer 1

您需要更改的是 y 锚点并禁用 removeLabel 功能：

  icon.options.iconAnchor = [width  / 2, -24]; //That the label is centered

function createLabel(layer, text, count){
    //removeLabel(layer);
    var icon = createStaticLabelIcon(text);
  var testspan = document.createElement("span");
  document.body.appendChild(testspan); 

  testspan.className = "textwidth";
  testspan.style.fontSize = "10px";
  testspan.innerHTML = text;
  var width = testspan.clientWidth +11;
  var posY = 0;
  if( count == 1){
     posY = -4;
  } else if( count == 2){
     posY = -24;
  }

  icon.options.iconAnchor = [width  / 2, posY]; //That the label is centered

  var label = L.marker(layer.getLatLng(),{icon: icon}).addTo(mymap);
  layer.appendedLabel = label;

  document.body.removeChild(testspan); 
}

createLabel(marker1, "Label 1.1",1);
createLabel(marker1, "Label 1.2",2);

传单地图的第二个标签？

Second label for leaflet map?

javascript

maps

label

leaflet