在 MouseOver 事件上显示文本的传单框架

Question

我正在使用传单框架向地图添加标记并在地图上显示它们我想在将鼠标悬停在标记上后显示一些文本。我编写了代码来将所有标记添加到数组中，然后在getallMarkers 函数中获取所有标记，以在标记的鼠标悬停事件上显示文本。它适用于

({
    "echo" : function(cmp,event,helper) {
        var action = cmp.get("c.getLatLang");

        action.setCallback(this, function(response) {
        var state = response.getState();
        if (state === "SUCCESS") {
            alert("From server: >>" + response.getReturnValue());
            var strLatLng = response.getReturnValue();
            var pos = strLatLng.indexOf(';');
                if (pos == 0)
                {
                    alert('Inside POS is zero');
                    strLatLng = strLatLng.substring(1,strLatLng.length);
                    alert('AFTER cut latlang is>>' + strLatLng + '<<<');
                }
                //alert('String value is>>'+ strLatLng + '<<');
            var firstPairPos = strLatLng.indexOf(';');
            var firstPair = strLatLng.substring(0,firstPairPos);
            var value1 = firstPair.split('#');
            var allpairs = strLatLng.split(';');
            alert('ALLPAIRS array contains>>>' + allpairs + '<<');
                //alert("FIrst PAir is:>>" + value1[0] + '<<' + "value2 is>>" + value1[1]);
                var map;
                var arrMarkers=[];
                var lat = value1[1];
                var lang = value1[2];
                alert ("after first pair:: >>" + lat + ">>" + lang + "<<");
                var map = new L.Map('map');
                //map = L.map('map').setView([lat, lang], 6);
                map.setView([lat,lang], 6);

                L.tileLayer('https://api.tomtom.com/map/1/tile/basic/main/{z}/{x}/{y}.png?key={apiKey}', {
                apiKey: 'trv87gvquv8yyfr4nrwgsdzc',
                maxZoom: 18}).addTo(map);


                for (i=0;i<allpairs.length;i++)
                {
                    var j=0,k=0;
                    var newpair = allpairs[i].split('#');
                    var text = newpair[0];
                    var lat1 = newpair[1];
                    var lng1 = newpair[2];
                    alert('lat1 lang1 is allpairs loop>>'+ lat1 + '<<'+ lng1 + '<< text is>>' + text);
                    var title = text;

                     var marker = L.marker([lat1, lng1],'showtext');
                     //marker.on('mouseover',getallmarkers);
                     marker.addTo(map).bindPopup(title);
                     marker.on('mouseover',getallmarkers);
                   // arrMarkers.push(marker);

                    //map.addlayer(popup);
                    //L.marker([lat1, lng1]).addTo(map).bindPopup(title);
                    //L.marker([lat1, lng1],"this is marker title").addTo(map).bindPopup(title);

                }
            function getallmarkers()
            {
            for (l=0;arrMarkers.length>0;l++)
            {
               alert('Inside arrmarkers');
               //var markernew = arrMarkers[l];
               alert('arr markers is >>' + arrMarkers[l] + '<<');
               arrMarkers[l].on('mouseover', function(e){arrMarkers[l].openPopup();});
            }
            }
              //map.on('click', onMapClick);

            }
            else if (state === "ERROR") {

                var errors = response.getError();
                if (errors) {
                    if (errors[0] && errors[0].message) {
                        console.log("Error message: " +
                                 errors[0].message);
                    }
                } else {
                    console.log("Unknown error");
                }
            }
        });

        function onMapClick(e)
        {
                    alert("You clicked the map at ABTEST>>" + e.latlng);
                    var out = e.latlng;
                    alert("Lat Lang on out is>>" + out + "<<");
                    var lat = 51.11732;
                    var lang = 6.78955;

                    var action = cmp.get("c.getNearestVehicles");
                    alert('after getnearestvehicles call');
                    //action.setParams({"strlat":"51117320","strlang":"6789550"});
                    //alert('after setparams call');
            //

                    action.setCallback(this, function(a){
                        alert('INSIDE SETCALLBACK ACTION MAP CLICK');
                        var strLatLang1 = a.getReturnValue();
                       alert("STR LAT LANG1 is>>>" + strLatLang1 + '<<<');

                    });
                    if(callback)
                    {
                    action.setCallback(this, callback)
                    }
            //$A.enqueueAction(action);
                   //helper.callserver();
        }
        $A.enqueueAction(action);
    }
})

Answer 1

嗯，我认为您正在寻找的插件是Leaflet.Label。这是一个成熟的插件，带有不显眼的标签，已经开发了多年。标签很容易与这样的代码绑定

L.marker([-37.7772, 175.2606]).bindLabel('Look revealing label!').addTo(map);

演示站点位于http://leaflet.github.io/Leaflet.label/

传单弹出窗口更大一些，在地图上占用更多空间，但理论上它们可以与一些代码一起使用，例如

myFeatureGroup.on('mouseover',function(ev) {
  ev.layer.openPopup()
})