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 - 悬停问题上的工具提示

1 个答案: