angularjs - 使用 OverlappingMarkerSpiderfier 时如何处理 map 标记的 OnClick？

Question

我刚刚发现OverlappingMarkerSpiderfier 用于 Leaflet，并认为它可能非常有用(请注意，Leaflet 版本提供的选项比 Google map 版本少，但我仅限于 Leaflet)。

只需几分钟即可将其添加到现有项目中，但我有一个小问题:-(

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

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

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

我的问题是这是否是普遍采用的方法。 你是如何做到的？

这是我的 AngularJs 代码，它向 map 添加了一个标记，以防有帮助。

    // +=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=
    /** 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但也许它还有一些您可能需要的功能