Leaflet Markercluster - 悬停问题的工具提示

Question

我是 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();
});

Answer 1

您需要使用 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 时应该可以正常工作

Leaflet Markercluster - 悬停问题的工具提示

Leaflet Markercluster - tooltip on hover issue

markerclusterer

leaflet

mapbox