使用 OverlappingMarkerSpiderfier 时如何处理地图标记的 OnClick？

Question

我刚刚发现 OverlappingMarkerSpiderfier for Leaflet，并认为它可能非常有用（请注意 Leaflet 版本提供的选项少于 Google 地图版本，但我仅限于 Leaflet）。

将它添加到现有项目只需几分钟的工作，但我有一个小问题:-(

当我点击其中的任何标记时

我看到标记短暂展开 (spiderify)，但随后标记的 OnClick() 触发（将我移动到新状态，显示新页面，没有地图）。

我想我可以改变我的代码，不添加标记的 OnClick() 处理程序，直到它展开，然后添加它，这样只有单击展开的（蜘蛛化的）标记才会执行以下操作当前点击标记时拍摄。

我的问题是这是否是普遍采用的方法。你是怎么做到的?

这是我的 AngularJs 代码，用于向地图添加标记，以防有帮助。

    // +=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=
    /** Given some data about a single conpany, add an appropriate marrker (and tooltip) to the map */
    Self.AddCompanyMarkerToMap = function (companyData) 
    {
        const companyName = companyData.company_name;
        const latitude    = companyData.latitude;
        const longitude   = companyData.longitude;
        let   iconImage   = 'marker-icon-blue.png';

        if (companyData['currentWorkers'] > 0)
            iconImage = 'marker-icon-green.png';

        //console.log('Add marker to map for company : ' + companyName);

        Self.companyMarkers[companyName] = { lat: latitude, lng: longitude, message: companyName }

        const markerLatLng = L.latLng(latitude, longitude);
        const title = GetCompanyMapMarkerTitle(companyData);

        // see https://leafletjs.com/reference-1.4.0.html#popup
        ////marker.bindPopup("<b>Popup for</b><br>" + companyName);   // replaced by OnClick()

        //console.log('Marker added to map for "' + companyName + '"');

        // see https://leafletjs.com/reference-1.4.0.html#marker
        const marker = L.marker(markerLatLng,
            {
                draggable: false,

                // this is the tooltip hover stuff
                title: title,

                companyId: companyData['company_id'],

                // see https://leafletjs.com/reference-1.4.0.html#icon
                // this is a permanent label.
                icon: new L.DivIcon({
                    ////     className: cssClassname,
                    html: '<img class="my-div-image" src="../common/js/third_party/leaflet/images/' + iconImage + '" />'
                        + '<span style="color:darkblue">' + companyName + '</span>',
                    className: 'dummy',      // hide the square box See https://gis.stackexchange.com/questions/291901/leaflet-divicon-how-to-hide-the-default-square-shadow
                    iconSize: [41, 51],      // size of the icon
                    iconAnchor: [20, 51],    // point of the icon which will correspond to marker's location
                    popupAnchor: [0, -51]    // point from which the popup should open relative to the iconAnchor
                })
            }).addTo(Self.map).on('click', Self.CompanyMarkerClicked);

        Self.companyMarkers.push(marker);
        Self.overlappingMarkerSpiderfier.addMarker(marker);

        Self.UpdateMapBoundariesIfRequired(latitude, longitude);
    };      // AddMarkerToMap()

Answer 1

您可以向 OMS 图层添加点击事件：

oms.addListener('click', function(marker) {
  console.log(marker)
  marker.setIcon(greenIcon)
});

这有点令人困惑，但是 click 事件仅在标记蜘蛛化并且您单击某个标记或者它是不在蜘蛛“组”中的标记时调用

在How to use

Instead of adding click listeners to your markers directly via marker.addEventListener or marker.on, add a global listener on the OverlappingMarkerSpiderfier instance instead. The listener will be passed the clicked marker as its first argument.

这是一个普通的 js example

我认为您的代码应该如下所示：

Self.overlappingMarkerSpiderfier.addListener('click', function(marker) {
  console.log(marker)
  Self.CompanyMarkerClicked(marker); // if you pass the marker
});

Self.AddCompanyMarkerToMap = function (companyData) {
    // ...
    const marker = L.marker(markerLatLng, {
        draggable: false,
        // this is the tooltip hover stuff
        title: title,
        companyId: companyData['company_id'],
        icon: new L.DivIcon({
            ////     className: cssClassname,
            html: '<img class="my-div-image" src="../common/js/third_party/leaflet/images/' + iconImage + '" />'
                + '<span style="color:darkblue">' + companyName + '</span>',
            className: 'dummy',      // hide the square box See https://gis.stackexchange.com/questions/291901/leaflet-divicon-how-to-hide-the-default-square-shadow
            iconSize: [41, 51],      // size of the icon
            iconAnchor: [20, 51],    // point of the icon which will correspond to marker's location
            popupAnchor: [0, -51]    // point from which the popup should open relative to the iconAnchor
        })
    }).addTo(Self.map); // <----------- remove the click event

    Self.companyMarkers.push(marker);
    Self.overlappingMarkerSpiderfier.addMarker(marker);
};

我看到你评论了

// see https://leafletjs.com/reference-1.4.0.html#popup

这是 Leaflet 版本 1.4.0 的文档，当前版本是 1.7.1，请注意使用正确的版本 ;)

您可能已经看过图书馆 Leaflet.markercluster，但也许它还有一些您可能需要的功能

使用 OverlappingMarkerSpiderfier 时如何处理地图标记的 OnClick？

How to hanlde OnClick of map markers when using OverlappingMarkerSpiderfier?

angularjs

leaflet

overlappingmarkerspiderfier