如何在传单中的标记下方添加文本?

本文介绍了如何在传单中的标记下方添加文本?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在传单地图上创建了一些标记，但是唯一的问题是我不知道如何在每个标记下方添加文本，并且我不谈论弹出窗口.我的意思是标记下面的文本必须是永久的.例如在印度标记下的文字为印度".我有一个即时消息正在处理的示例:

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 = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <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

推荐答案

您可能不希望为每个数据点显示一个标记，而是显示两个标记，其中一个标记为L.DivIcon，仅显示文字，例如:

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

添加一些与DivIcon的className相关的CSS，以使DivIcon变大，例如:

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

在工作示例中:

您可能还希望将两个标记组合在一个L.LayerGroup中，以将它们视为一个实体(例如，使用L.Control.Layers来切换其可见性).借助您自己的HTML/CSS技能，再加上Leaflet的DivIcon的iconAnchor和iconSize选项，对其进行进一步调整.

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 .

或者，您可以将永久L.Tooltip与自定义CSS类一起使用，以使其具有透明背景，例如:

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

CSS就像

.transparent-tooltip {
  background: transparent;
  border: 1px solid red;
  box-shadow: none;
}

.transparent-tooltip::before {
  border: none;
}

工作示例看起来像...

再次，使用工具提示选项和您自己的CSS对其进行进一步调整.

Again, tweak it further with the tooltip options and your own CSS.

这篇关于如何在传单中的标记下方添加文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

Permanent