6

私は 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);

ポップアップが機能しています。各機能にホバーを追加する必要があります。どうすればよいですか?

4

1 に答える 1

3

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
}

デザインに合わせて上記のコードを変更する必要がありますが、各機能のホバーを機能させる方法を示しています。

于 2013-07-23T16:20:33.083 に答える