javascript 传单中圆形标记的标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15543141/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
label for circle marker in leaflet
提问by vaibhav shah
I am able to add label to circlemarker like this
我可以像这样将标签添加到 circlemarker
L.circleMarker(points[i],{title: 'unselected'}).bindLabel('Destination').addTo(map);
This adds label which appears on mouse hover on circle marker.
这会添加出现在鼠标悬停在圆圈标记上的标签。
But I want to add static label which will appear regardless of mouse is on that circle marker or not.
但是我想添加静态标签，无论鼠标是否在该圆形标记上，都会出现该标签。
I am referring this demo http://leaflet.github.com/Leaflet.label/for adding static label to circle marker but some how I am not able to do it. It is working fine with markers but with circle Markers static label is not working.
我指的是这个演示http://leaflet.github.com/Leaflet.label/用于将静态标签添加到圆圈标记，但有些我无法做到。使用标记可以正常工作，但使用圆形标记静态标签不起作用。
Also is there any other method to add label on circle marker ?
还有其他方法可以在圆形标记上添加标签吗？
回答by tbicr
L.CircleMarkerextended from L.Pathnot L.Marker, so if you compare https://github.com/Leaflet/Leaflet.label/blob/master/src/Path.Label.jsand https://github.com/Leaflet/Leaflet.label/blob/master/src/Marker.Label.jsyou can find that Pathdoesn't have any options and this logic you must implement yourself. For example:
L.CircleMarker从L.Pathnot扩展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 });
回答by podcastfan88
Just wanted to add an update or correction to tbicr's great response (not sure if the API updated after his response).
只是想为 tbicr 的出色响应添加更新或更正（不确定 API 是否在他的响应后更新）。
You can do this like so:
你可以这样做：
// 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
});
