javascript - 如何使用 leaflet js 插件弹出和悬停？

Question

我正在使用 drupal 传单模块，并希望在单击时弹出一个窗口，然后在悬停时将鼠标悬停在 Angular 落中。目前我有弹出窗口工作但无法添加鼠标悬停。我读到的所有地方都在说您可以使用 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
}

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