如何在小冊子中的鼠標懸停的數據庫中添加標籤到多邊形

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(); 
}