时间戳

首页 > 解决方案 > 传单：如何在鼠标悬停在该标记上时仅突出显示位于标记后面的多边形？

dictionary - 传单：如何在鼠标悬停在该标记上时仅突出显示位于标记后面的多边形？

问题描述

通过在 php 上循环，我生成了一些多边形和标记。现在我想突出显示位于鼠标悬停标记后面的一个多边形。但是下面的代码总是突出显示相同的多边形。无论鼠标悬停哪个标记，它始终突出显示相同的多边形。我认为问题在于它总是需要循环的最后一个多边形。我怎样才能使鼠标悬停的标记突出显示它后面的多边形？提前非常感谢..

 <?PHP  
       for ($i=0;$i<=count($station);$i++) {  
 ?>
        var polygon = new L.Polygon(line, {
            color: pastel,
            weight: 0.4,
            opacity: 0.1,
            fillColor: pastel,
            fillOpacity: 0.05,    
            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)
        .bindTooltip('<?=$desc[$i]?>');
        
        marker.on('mouseover', function() { 
            polygon.setStyle({
                fillOpacity: 0.5  
            });
        });
        marker.on('mouseout', function() {
            polygon.setStyle({
                fillOpacity: 0.05
            });
        });
    
    <?PHP
    }
    ?>

标签： dictionaryleafletopenstreetmaphighlightmouseover

解决方案

像这样引用标记上的多边形：

var polygon = new L.Polygon(line, {
            color: pastel,
            weight: 0.4,
            opacity: 0.1,
            fillColor: pastel,
            fillOpacity: 0.05,    
            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)
        .bindTooltip('<?=$desc[$i]?>');
        
        marker.refPoly = polygon;
        marker.on('mouseover', function(e) { 
            e.target.refPoly.setStyle({
                fillOpacity: 0.5  
            });
        });
        marker.on('mouseout', function(e) {
            e.target.refPoly.setStyle({
                fillOpacity: 0.05
            });
        });

推荐阅读