时间戳

首页 > 解决方案 > 传单：如何添加标记以仅在将鼠标悬停在另一个标记上时进行映射？

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

问题描述

我有一个多边形和两个标记。最后一个标记（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 + '°');

标签： leafletmouseovermarker

解决方案

您可以使用删除标记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);
});

推荐阅读