传单：如何添加标记以仅在鼠标悬停在另一个标记上时进行映射？

问题描述

我有一个多边形和两个标记。最后一个标记（var power）我只想在鼠标悬停或点击第一个标记（var myIcon）时开始。我怎样才能做到这一点？你能看一下这段代码吗？

var polygon = new L.polygon(line,{
    color: pastel,weight: 0.1,opacity: 0.1,fillColor: pastel,fillOpacity: 0.04,interactive: true   
});
polygon.addTo(map)
} 

var myIcon = L.divIcon({
    className: 'divIcon',iconSize: new L.Point(35,15),iconAnchor:[18,20],zIndexOffset: 1000,html: '<?=$desc1[$i]?>'
});
var marker = L.marker([x1,y1],{icon: myIcon})
.addTo(map)

marker.refpoly = polygon;
marker.on('mouSEOver',function(e) {
    e.target.refpoly.setStyle({
    fillOpacity: 0.48  
    });
});
marker.on('mouSEOut',function(e) {
    e.target.refpoly.setStyle({
    fillOpacity: 0.04
    });
});

var power = <?PHP echo json_encode($watt); ?>;
var power = power.reverse();
var myPower = L.divIcon({
    className: 'divPower',iconSize: new L.Point(25,12),iconAnchor:[12,5],html: power[b]
}); 
    L.marker(pointC,{icon: myPower}).addTo(map)
    .bindTooltip(350-b*10 + '°');

解决方法

您可以使用 marker.removeFrom(map) 删除标记并使用 marker.addTo(map) 将其添加到地图中：

var marker = L.marker([x1,y1],{icon: myIcon})
.addTo(map)
marker.refPoly = polygon;


var power = <?php echo json_encode($watt); ?>;
var power = power.reverse();
var myPower = L.divIcon({
    className: 'divPower',iconSize: new L.Point(25,12),iconAnchor:[12,5],html: power[b]
}); 

// I removed .addTo(map). Then the marker is not displayed from beginning
var powerMarker = L.marker(pointC,{icon: myPower})
    .bindTooltip(350-b*10 + '°');


marker.on('mouseover',function(e) {
    e.target.refPoly.setStyle({
       fillOpacity: 0.48  
    });
    powerMarker.addTo(map);
});
marker.on('mouseout',function(e) {
    e.target.refPoly.setStyle({
       fillOpacity: 0.04
    });
    powerMarker.removeFrom(map);
});

marker.on('click',function(e) {
    powerMarker.addTo(map);
});