Leaflet Markercluster - всплывающая подсказка при наведении курсора

Я новичок в javascript, пытаюсь создать интерактивную карту в Интернете, где некоторые события должны запускаться нажатием на маркеры, а некоторые - просто наведением на них курсора. Удалось заставить часть щелчка работать, но из-за плагина Markercluster я не уверен, где использовать функцию onEachFeature для открытия всплывающей подсказки при наведении курсора на один маркер. Кто-нибудь может сказать мне, что я делаю не так?

var geoJsonFeature = {
  type: 'FeatureCollection',
  features: 
   [
    {
    type: 'Feature',
    properties: {
        title: 'Title',
        page: 'some.html',
        'marker-color': '#000000',
        zoom: 7
    },
    geometry: {
        type: 'Point',
        coordinates: [12.583745,55.6750803]
    }
},
...
};

// access to mapbox api
L.mapbox.accessToken ='...';
var map = L.mapbox.map('map', 'example1234').setView([34, -37], 3);

function getTitle(marker) {
    return marker.feature.properties.title;
};

function getPage(marker) {
    return marker.feature.properties.page;
};

var markerGroup = new L.MarkerClusterGroup({showCoverageOnHover:false});

var geoJsonLayer = L.geoJson(geoJsonFeature, {
  onEachFeature: function (feature, layer) {
    var popupContent = getTitle(marker);
    layer.bindPopup(popupContent);
  }
});

markerGroup.addLayer(geoJsonLayer);

map.addLayer(markerGroup);

markerGroup.on('click', function(ev) {
  var marker = ev.layer;

  marker.on('click', function(ev) {
    if(map.getZoom() > marker.feature.properties.zoom) {
        map.setView(ev.latlng, map.getZoom());   
    } 
    else {
        map.setView(ev.latlng, marker.feature.properties.zoom);
    }
   });
  });
});

geoJsonLayer.on('mouseover', function(e) {
  e.layer.openPopup();
});

geoJsonLayer.on('mouseout', function(e) {
  e.layer.closePopup();
});

leaflet mapbox markerclusterer
person Leo    schedule 13.01.2015    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вам нужно использовать опцию onEachFeature, чтобы получить отдельные маркеры и привязать обработчики к событиям mouseover и mouseout:

onEachFeature: function (feature, layer) {
  layer.bindPopup(feature.properties.title);
  layer.on("mouseover", function () {
    layer.openPopup();
  });
  layer.on("mouseout", function () {
    layer.closePopup();
  });
}

Вот рабочий пример Plunker: http://plnkr.co/edit/hfjOWv3uCBFawDGqR3Ue?p=preview < / а>

Примечание: я не использую ClusterMarker в этом примере, но он должен работать нормально при использовании ClusterMarker

person iH8    schedule 13.01.2015
comment
Спасибо, все сработало отлично. Для интеграции с Markercluster я добавляю onEachFeature к слою, в котором я хранил данные GeoJson, которые позже добавляю в Markergroup, а затем снова на карту. var geoJsonLayer = L.geoJson (geoJsonFeature, {onEachFeature: function (feature, layer) {layer.bindPopup (feature.properties.title); layer.on (mouseover, function () {layer.openPopup ();}); layer .on (mouseout, function () {layer.closePopup ();});}}); - person Leo; 14.01.2015
comment
Хотел бы я понять, как это сделать без geoJson :-( Я полностью застрял на создании (многострочной) всплывающей подсказки для кластера карты Leaflet. Так застрял, что у меня даже нет кода, который я мог бы опубликовать . - person Mawg says reinstate Monica; 29.01.2021