Question

我有一个多边形图层，我已经从数据库中加载了它。我想要显示多边形的每个多边形名称onmouseover。我首先将它添加到多边形的中心，我想将其更改为onmousover，就像我对多边形样式所做的那样。我是传单的新手，所以我需要一些帮助，如何将其更改为onmouseover。

var BoundariesLayer = L.geoJson(
    Boundaries, {
        style: boundariesStyle,
        onEachFeature: boundariesOnEachFeature
    }).addTo(mymap);
mymap.fitBounds(BoundariesLayer.getBounds());
var markers = new Array();

function boundariesOnEachFeature(feature, layer) {
    markers.push(
        L.circleMarker(
            layer.getBounds().getCenter(), {
                radius: 0.0,
                opacity: 0,
                fillOpacity: 0
            }
        )
    );
    var markersCount = markers.length;
    markers[markersCount - 1].bindTooltip(
        feature.properties.NAME_3, {
            permanent: true,
            className: "my-label",
            direction: 'center'
        }
    );
    markers[markersCount - 1].addTo(mymap);
    markers[markersCount - 1].hideLabel();

    layer.on({
        mouseover: highlightFeature,
        mouseout: resetHighlight,
        click: zoomToFeature
    });
}

function highlightFeature(e) {
    var layer = e.target;
    layer.setStyle({
        weight: 3,
        color: 'rgb(73,133,73)',
        fillColor: 'rgb(73,133,73)',
        fillOpacity: 0.2
    });
}

function resetHighlight(e) {
    BoundariesLayer.resetStyle(e.target);

}

function zoomToFeature(e) {
    mymap.fitBounds(e.target.getBounds());
}

Answer 1

PUH，你的代码看起来有点尴尬。

我不确定你要对你的CircleMarkers做什么？

试试这个：

function boundariesOnEachFeature(feature, layer) {
   //CREATE POPUP
   var popup = new L.Popup({
     autoPan: false,
      keepInView: true,
      //WHATEVER YOU LIKE
   }).setContent(feature.properties.NAME_3);

   var bounds = layer.getBounds();
   // Get center of bounds
   var center = bounds.getCenter();

   popup.setLatLng(center);

   //BIND POPUP TO LAYER
   layer.bindPopup(popup);

   //SET MOUSE EVENTS
   layer.on({
     mouseover: function () {
       layer.openPopup();
     },
     mouseout: function () {
       layer.closePopup()
      }
    });
}

//添加第二个功能，你可以做到这一点：

function newFunction(){
   console.log("MY NEW FUNCTION");
}

并将鼠标悬停事件更改为：

 mouseover: function () {
   layer.openPopup();  
   newFunction();
 }

如何在小册子中鼠标悬停时从数据库向多边形添加标签

1 个答案: