传单

时间:2016-11-19 05:51:48

标签: javascript leaflet

我在使用传单1.0 rc-3标记中心或仅使用多边形时遇到问题。

用于添加多边形并将标签关联的代码就是这样

         .leaflet-label {
          background:none;
           left: -22px;
          border:none;
          background-clip:none;
        }

        .leaflet-label:before {
border-right: 0px solid black;
border-right-color: inherit;
left: -10px;

和js

 var lotss = L.geoJson(lots, {

    style: function(feature) {
                switch (feature.properties.SOLD) {
            case 'Y': return {color: "#FF0000", weight:1};
        }
        switch (feature.properties.TYPE) {
            case 'EASEMENT': return {color: "#FFFFFF", weight:1};
            case 'LOT':   return {color: "#00FF00", weight:1};
            case 'ROAD':   return {color: "#000000", weight:1};
        }

    }
    }).addTo(map);

var label = new L.Label()
label.setContent("test")
label.setLatLng(lotss.getBounds().getCenter())
map.showLabel(label);

但它似乎没有工作,我真正看到的唯一参考引用了上面的标签代码。我做错了吗?它是一系列包裹,我试图用它来标记中心地段的数量。

感谢您提供任何提示

1 个答案:

答案 0 :(得分:1)

正如@chrki评论的那样,你正在使用一个插件(因为L.Label不在传单代码中)

如果您使用https://github.com/Leaflet/Leaflet.label,则必须注意不推荐使用传单1.0

使用传单1.0时,您必须使用工具提示。

map.openTooltip("test", geojsonLayer.getBounds().getCenter());

以下是一个示例:https://yafred.github.io/ajax-geojson-and-labels/index4.html

如果您不喜欢工具提示的外观,可以使用带有L.DivIcon的标记来探索解决方案

    L.marker(lotss.getBounds().getCenter(), {
        icon: new L.DivIcon({
            className: 'my-div-icon',
            html: '<h2>There are n lots here</h2>'
            })
    }).addTo(map);

enter image description here