Stworzyłem kilka znaczników na mapie ulotki, ale jedynym problemem jest to, że nie wiem, jak dodać tekst pod każdym znacznikiem i nie mówię o wyskakujących okienkach. Chodzi mi o to, że tekst pod znacznikiem musi być trwały. Dla m.in. tekst pod znacznikiem Indii z napisem „Indie”. Mam przykład tego, nad czym teraz pracuję: tu wpisz opis obrazu

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
3
Jackson_Stake 20 grudzień 2019, 05:57

3 odpowiedzi

Podczas wiązania podpowiedzi wraz z opcjami przekazywania tekstu. stałe: prawda i kierunek: „dół”

function addMarker(props){
    var marker = L.marker(props.coords, {icon: myIcon}).bindTooltip(props.country, {permanent: true, direction : 'bottom'}).addTo(mymap);
}

Więcej opcji znajdziesz w dokumentacji ulotki. Odniesienie: Dokumentacja ulotki https://leafletjs.com/reference-1.0.0.html# podpowiedź

Wynik końcowy tutaj: https://jsfiddle.net/s5xnq01w/8/

0
Revati Mahajan 20 grudzień 2019, 07:20
Wyskakujące okienko pojawia się poniżej, ale tekst jest w prostokącie, chcę tylko samego tekstu, czy jest jakiś sposób, aby to zrobić?
 – 
Jackson_Stake
20 grudzień 2019, 07:43

Możesz utworzyć znacznik DIV:

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

Przykład: https://jsfiddle.net/falkedesign/Lnxwa923/

0
Falke Design 20 grudzień 2019, 12:01

Prawdopodobnie chcesz wyświetlić nie jeden, ale dwa znaczniki dla każdego punktu danych, przy czym jeden z nich zawiera znak L.DivIcon, aby wyświetlić tylko tekst, np .:

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

Dodaj trochę kodu CSS związanego z className DivIcon, aby powiększyć DivIcon, np .:

.text-below-marker {
  min-width: 100px;
  left: -50px;
  text-align: center;
  min-height: 1.2em;
  border: 1px solid red;
}

W przykładzie roboczym, który wygląda tak:

example of divicon

Możesz również zgrupować oba znaczniki w L.LayerGroup, aby traktować je jako jedną całość (np. Przy użyciu L.Control.Layers do przełączania ich widoczności). Możesz go dodatkowo ulepszyć, korzystając z własnych umiejętności HTML / CSS oraz opcji iconAnchor i iconSize w Leaflet's DivIcon.


Alternatywnie możesz użyć trwałego L.Tooltip z niestandardową klasą CSS, aby miał przezroczyste tło, np .:

marker.bindTooltip('Null Island', {
  permanent: true, 
  direction : 'bottom',
  className: 'transparent-tooltip',
  offset: [0, -8]
});

A CSS byłby czymś w rodzaju

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

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

przykład pracy wygląda tak...

example of tooltip

Ponownie, ulepsz go dalej za pomocą opcji podpowiedzi i własnego CSS.

2
IvanSanchez 20 grudzień 2019, 12:23