этикетки для окружности маркера в листовке

Question

Я могу добавить метку circlemarker как этот

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

Это добавляет метку, которая появляется при наведении курсора мыши на окружности маркера.

Но я хочу добавить статическую метку, которая будет отображаться независимо от того, находится мы на этом марке круга или нет.

Я использую эту демонстрацию http://leaflet.github.com/Leaflet.label/ для добавления статической метки в маркер круга, но некоторые из того, как я не могу это сделать. Он отлично работает с маркерами, но с круговой маркой статический ярлык не работает.

Также есть ли какой-либо другой способ добавления метки на маркер круга?

Answer 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 }); 

Answer 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 
});