传单中圆形标记的标签答案

【问题标题】：label for circle marker in leaflet传单中圆形标记的标签
【发布时间】：2013-03-10 16:53:47
【问题描述】：

我可以像这样为圆形标记添加标签

L.circleMarker(points[i],{title: 'unselected'}).bindLabel('Destination').addTo(map);

这会添加在鼠标悬停在圆形标记上时出现的标签。

但我想添加静态标签，无论鼠标是否在那个圆圈标记上，它都会出现。

我指的是这个演示 http://leaflet.github.com/Leaflet.label/ 为圆形标记添加静态标签，但有些我无法做到。使用标记可以正常工作，但使用圆形标记静态标签不起作用。

还有其他方法可以在圆形标记上添加标签吗？

【问题讨论】：

标签： javascript leaflet

【解决方案1】：

L.CircleMarker 扩展自L.Path 而不是L.Marker，所以如果你比较https://github.com/Leaflet/Leaflet.label/blob/master/src/Path.Label.js 和https://github.com/Leaflet/Leaflet.label/blob/master/src/Marker.Label.js 你会发现Path 没有任何选项，这个逻辑你必须自己实现。例如：

L.CircleMarker.include({
    bindLabel: function (content, options) {
        if (!this._label || this._label.options !== options) {
            this._label = new L.Label(options, this);
        }

        this._label.setContent(content);
        this._labelNoHide = options && options.noHide;

        if (!this._showLabelAdded) {
            if (this._labelNoHide) {
                this
                    .on('remove', this.hideLabel, this)
                    .on('move', this._moveLabel, this);
                this._showLabel({latlng: this.getLatLng()});
            } else {
                this
                    .on('mouseover', this._showLabel, this)
                    .on('mousemove', this._moveLabel, this)
                    .on('mouseout remove', this._hideLabel, this);
                if (L.Browser.touch) {
                    this.on('click', this._showLabel, this);
                }
            }
            this._showLabelAdded = true;
        }

        return this;
    },

    unbindLabel: function () {
        if (this._label) {
            this._hideLabel();
            this._label = null;
            this._showLabelAdded = false;
            if (this._labelNoHide) {
                this
                    .off('remove', this._hideLabel, this)
                    .off('move', this._moveLabel, this);
            } else {
                this
                    .off('mouseover', this._showLabel, this)
                    .off('mousemove', this._moveLabel, this)
                    .off('mouseout remove', this._hideLabel, this);
            }
        }
        return this;
    }
});

L.circleMarker([53.902257, 27.541640] ,{title: 'unselected'}).addTo(map).bindLabel('Destination', { noHide: true });

【讨论】：

我将行 this._showLabel({latlng: this.getLatLng()}); 从 noHide 条件中移出到另一个包含的方法中：showLabel: function () {...}。这允许我创建圆圈，将其添加到地图中，然后调用 circle.showLabel()。

【解决方案2】：

只是想为 tbicr 的出色响应添加更新或更正（不确定 API 是否在他的响应后更新）。

你可以这样做：

 // First add your GeoJSON layer
 geojson = L.geoJson(myGeoJson,{
        onEachFeature: onEachFeature
    }).addTo(map);

 // onEachFeature is called every time a polygon is added
 var polys = [];
 function onEachFeature(layer){
     polys.push(layer); // Push the polygons into an array you can call later
 }

 // Now trigger them after they've been added
 $('a').click(function(){
      polys[0].fire('click') // clicks on the first polygon
      polys[1].fire('click') // clicks on the second polygon
 });

【讨论】：