如何使用leaflet js插件进行弹出和悬停？

Question

我正在使用drupal传单模块,想要点击弹出窗口,然后鼠标悬停在鼠标悬停时显示在角落里.目前我有弹出窗口工作但无法添加鼠标悬停.我读过的每个地方都说你可以用geoJson对象添加鼠标悬停到这个特征,但看起来我不能通过这个模块使用它访问该对象.这是我的Js代码.

(function ($) {
Drupal.behaviors.maps = {
attach:function (context, settings) {

  // Add legends to each leaflet map instance in Drupal's settings array
  $(settings.leaflet).each(function() {
    // Get the map object from the current iteration
    var map = this.lMap;

    // Create a legend class that will later be instantiated and added to the map
    var legend = L.Control.extend({
      options: {
        position: 'bottomleft'
      },

      onAdd: function (map) {
        // create the control container div with classes
        var container = L.DomUtil.create('div', 'info legend');

        var html = '<h1>Status</h1>';
        html += '<ul>';
        html += ' <li><span class="color home"></span> Available Home</li>';
        html += ' <li><span class="color lot"></span> Available Lot</li>';
        html += ' <li><span class="color not-available"></span> Not Available</li>';
        html += '</ul>';
        container.innerHTML = html;

        return container;
      }
    });
    map.scrollWheelZoom.disable();
    map.addControl(new legend());
  });
}
};
})(jQuery);

我有弹出窗口工作,我需要添加一个悬停到每个功能,我该怎么办？

Answer 1

创建 geojson 图层时，您可以传递函数：

var myLayer = L.geoJson(d, {style: style, onEachFeature: onEachFeature, pointToLayer: pointToLayer}).addTo(map);

onEachFeature指定根据事件调用哪些函数：

var onEachFeature = function onEachFeature(feature, layer) {
        layer.on({
            mouseover: highlightFeature,
            mouseout: resetHighlight,
            click: zoomToFeature,
            pointToLayer: pointToLayer
        });
    };

鼠标悬停功能示例：

function highlightFeature(e) {
    var layer = e.target;

    layer.setStyle({ // highlight the feature
        weight: 5,
        color: '#666',
        dashArray: '',
        fillOpacity: 0.6
    });

    if (!L.Browser.ie && !L.Browser.opera) {
        layer.bringToFront();
    }
    map.info.update(layer.feature.properties); // Update infobox
}

您需要修改上面的代码以适合您的设计，但它向您展示了如何使每个功能上的悬停功能正常工作。