Question

我想在使用Leaflet MarkerCluster时使用自定义图标作为标记。

我已经设法实现我的自定义图标，但现在标记弹出窗口不再有效。

我的代码如下所示：

var markers1 = new L.MarkerClusterGroup();

// add markers with popup info
var geoJsonLayer1 = L.geoJson(Myplaces, {
   onEachFeature: function(feature, layer) {
      layer.bindPopup(feature.properties.Name);
   }
})

// add markers with custom icons
var geoJsonLayer1 = L.geoJson(Myplaces, {
   onEachFeature: onEachFeature,
   pointToLayer: function(feature, latlng) {
      var iconURL = feature.properties.img;
      return new L.Marker(new L.LatLng(feature.geometry.coordinates[1], feature.geometry.coordinates[0]), {
         icon: L.icon({
            iconAnchor: [0, 0],
            popupAnchor: [0, 0],
            iconUrl: iconURL
         })
      });
   }
})

// add markers to map
markers1.addLayer(geoJsonLayer1);
map.addLayer(markers1);

当我删除自定义图标的部分时（“添加带自定义图标的标记”下面的部分），标记弹出窗口再次正常工作......

有什么建议吗？ 非常感谢您提供任何帮助!!

（我尝试了所有我能想到的事情，而且我在这里疯了......）; ）

Answer 1

编辑：哎呀！误解了你的问题。是的，问题是你两次做L.geoJson并用它们做不同的事情。此函数返回一个新的L.GeoJson对象，因此您添加弹出窗口的内容不是您正在制作自定义标记的内容。所以是的，你应该把它们结合起来。

var geoJson = L.geoJson(geoJsonData, {
    pointToLayer: function(obj) {
        var mark = L.circleMarker(obj.geometry.coordinates, obj.properties);
        mark.bindPopup('<div>' + marks.length + '</div>');
        return mark;
    }
});

这段代码来自并更新了我做here的例子。

我将在下面谈谈自定义群集图标。

作为旁注，尝试创建两个具有相同名称的变量通常是不好的做法，并且大多数短信都会抱怨。

...

我创建了一个使用群集，弹出窗口和自定义图标here的小型演示。

创建MarkerClusterGroup时，您可以为其创建一个任意函数，并为集群创建图标：

iconCreateFunction: function(cluster) {
    var count = cluster.getChildCount();
    return L.divIcon({
        html: '<span class="custom">' + (count + 100) + '</span>'
    })
}

您可以在哪里放置自定义群集图标的逻辑。对于单个标记，您可以直接传递构造函数的图标。您还会注意到弹出窗口适用于标记和群集。

编辑：之前的jsfiddles现在与传单和markercluster版本不兼容。这是working version

希望这有帮助！

Leaflet + MarkerCluster +自定义图标+弹出窗口

1 个答案: