9

このようにサークルマーカーにラベルを追加できます

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

これにより、円マーカーにマウスを合わせると表示されるラベルが追加されます。

しかし、マウスがその円マーカー上にあるかどうかに関係なく表示される静的ラベルを追加したいと思います。

このデモhttp://leaflet.github.com/Leaflet.label/を参照して、静的ラベルを円マーカーに追加しますが、それを行うことができない方法もあります。マーカーでは正常に機能していますが、円マーカーの静的ラベルでは機能していません。

また、円マーカーにラベルを追加する他の方法はありますか?

4

2 に答える 2

12

L.CircleMarkerL.Pathnotから拡張されているため、 https ：//github.com/Leaflet/Leaflet.label/blob/master/src/Path.Label.jsとhttps://github.com/Leaflet/Leaflet.label/blob/L.Markerを比較すると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 });
于 2013-03-21T12:54:59.607 に答える
1

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
 });
于 2013-03-26T18:55:32.270 に答える