Как сделать всплывающее окно и наведение с плагином листовки js?

Я использую модуль листовки 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);

У меня работает всплывающее окно, мне нужно добавить всплывающее окно для каждой функции, как мне это сделать?


javascript leaflet drupal
person jakecraige    schedule 23.07.2013    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Когда вы создаете свой слой 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
}

Вам нужно изменить приведенный выше код, чтобы он соответствовал вашему дизайну, но он показывает вам, как вы можете заставить работать наведение курсора на каждую функцию.

person Anna Pawlicka    schedule 23.07.2013
comment
Проблема в том, что я не создаю слой geoJson вручную. С модулем Drupal я передаю данные в функцию leaflet_render_map, поэтому без непосредственного редактирования модуля листовки у меня нет прямого доступа к объекту geoJson. - person jakecraige; 23.07.2013