问题
I created some markers on leaflet map but the only problem is that i dont know how to add a text below each marker and im not talking about popups. What I mean is that the text below the marker has to permanent. For e.g. a text below a marker on India that says "India". I have an example of what Im working on right now:
var southWest = L.latLng(-89.98155760646617, -180), northEast = L.latLng(89.99346179538875, 180);
var bounds = L.latLngBounds(southWest, northEast);
var mymap = L.map('map', {
center: [20.594, 78.962],
maxBounds: bounds, // set max bounds for the world map
zoom: 4, // default zoom level when the web is initiated
zoomSnap: 0.25, // map's zoom level must be in multiple of this
zoomDelta: 0.25, // controls how much the map's zoom level will change after a zoom
minZoom: 3.25, // min zoom level the user can zoom out
maxZoom: 6, // max zoom level the user can zoom in
zoomControl: true, // allow zooming
});
mymap.zoomControl.setPosition('topright'); // set + and - zoom buttons to top right corner .setOpacity('0.4')
L.DomUtil.setOpacity(mymap.zoomControl.getContainer(), 0.2); // set opacity of zoom buttons
var MapAttribution = '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>';
var DarkMatterUrl = 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png'; // For dark theme map
var PositronUrl = 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png'; // For light theme map
var tiles = L.tileLayer(DarkMatterUrl, { MapAttribution }).addTo(mymap);
// Array of marker coordinates
var markers = [
{
coords:[4.21, 101.97],
country:'Malaysia',
label:'Malaysia',
},
{
coords:[20.594, 78.962],
country:'India',
label:'India',
},
{
coords:[35.861, 104.195],
country:'China',
label:'China',
},
{
coords:[23.421, 53.8478],
country:'UAE',
label:'UAE',
},
{
coords:[23.6978, 120.9605],
country:'Taiwan',
label:'Taiwan',
},
{
coords:[0.7892, 113.9213],
country:'Indonesia',
label:'Indonesia',
},
];
// Edit marker icons
var myIcon = L.icon({
iconUrl: 'yellowcircle.png',
iconSize: [40, 40], // size of the icon
// iconAnchor: [],
// popupAnchor: [],
});
// Loop through markers
for(var i = 0; i<markers.length; i++){
addMarker(markers[i]);
}
// To add the marker coordinates
function addMarker(props){
var marker = L.marker(props.coords, {icon: myIcon}).bindTooltip(props.country).addTo(mymap);
marker.on('mouseover', function(e){
marker.openPopup();
});
marker.on('mouseout', function(e){
marker.closePopup();
});
}
// For GeoJSON features
var StringLines = [{
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[113.9213, 0.7892],[101.97, 4.21],[120.9605, 23.6978] // From Indonesia to Malaysia to Taiwan
]
}
}, {
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[53.8478, 23.421],[101.97, 4.21],[104.195, 35.861],[78.962, 20.594] // From UAE to Malaysia to China to India
]
}
}];
// Edits for LineStrings
var LineStringColor = {
"color": "#ff7800",
"weight": 5,
"opacity": 0.65
}
L.geoJSON(StringLines, {style: LineStringColor}).addTo(mymap); // add geoJSON features to the map
回答1:
When you are binding the tooltip, along with the text pass options. permanent: true and direction: 'bottom'
function addMarker(props){
var marker = L.marker(props.coords, {icon: myIcon}).bindTooltip(props.country, {permanent: true, direction : 'bottom'}).addTo(mymap);
}
you can find more options in the leaflet documentation. Reference: Leaflet Documentation https://leafletjs.com/reference-1.0.0.html#tooltip
End result here: https://jsfiddle.net/s5xnq01w/8/
回答2:
You can create a div marker:
createLabel(marker,"Test Text");
function createLabel(layer, text){
removeLabel(layer);
var icon = createStaticLabelIcon(text);
var testspan = document.createElement("span");
document.body.appendChild(testspan);
testspan.className = "textwidth";
testspan.style.fontSize = "10px";
testspan.innerHTML = text;
var width = testspan.clientWidth +11;
icon.options.iconAnchor = [width / 2, -4]; //That the label is centered
var label = L.marker(layer.getLatLng(),{icon: icon}).addTo(mymap);
layer.appendedLabel = label;
document.body.removeChild(testspan);
}
function removeLabel(layer){
if(layer.appendedLabel){
mymap.removeLayer(layer.appendedLabel); //Remove label that connected with marker, else the label will not removed
}
}
function createStaticLabelIcon(labelText) {
return L.divIcon({
className: "leaflet-marker-label",
html: '<span class="leaflet-marker-iconlabel" style="background: #fff; color: #000;";>'+labelText+'</span>',
text : labelText,
});
}
.leaflet-marker-label {
width: auto !important;
height: auto !important;
}
.leaflet-marker-iconlabel {
background: #fff;
border-radius: 7px;
-moz-box-shadow: 0 3px 10px #888;
-webkit-box-shadow: 0 3px 14px #999;
box-shadow: 0 3px 10px #888;
display: block;
font: 11px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
padding: 4px 6px;
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
white-space: nowrap;
}
.textwidth {
position: absolute;
visibility: hidden;
height: auto;
width: auto;
white-space: nowrap;
}
Example: https://jsfiddle.net/falkedesign/Lnxwa923/
回答3:
You probably want to display not one but two markers for each data point, one of them with a L.DivIcon to display just the text, e.g.:
var coords = L.latLng(0, 0);
L.marker(coords).addTo(map);
L.marker(coords, {
icon: L.divIcon({
html: "Null Island",
className: 'text-below-marker',
})
}).addTo(map);
Add a bit of CSS related to the DivIcon's className to make the DivIcon larger, e.g.:
.text-below-marker {
min-width: 100px;
left: -50px;
text-align: center;
min-height: 1.2em;
border: 1px solid red;
}
In a working example that looks like:
You might also want to group both markers in a L.LayerGroup to treat them as one entity (to the purposes of e.g. using L.Control.Layers to toggle their visibility). Tweak it further with your own HTML/CSS skills, plus the iconAnchor and iconSize options of Leaflet's DivIcon .
Alternatively, you can use a permanent L.Tooltip with a custom CSS class to make it have a transparent background, e.g.:
marker.bindTooltip('Null Island', {
permanent: true,
direction : 'bottom',
className: 'transparent-tooltip',
offset: [0, -8]
});
And the CSS would be something like
.transparent-tooltip {
background: transparent;
border: 1px solid red;
box-shadow: none;
}
.transparent-tooltip::before {
border: none;
}
The working example looks like...
Again, tweak it further with the tooltip options and your own CSS.
来源：https://stackoverflow.com/questions/59419337/how-to-add-text-below-a-marker-in-leaflet