2

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

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

当我单击这些中的任何标记时

在此处输入图像描述

我看到标记短暂扩展（蜘蛛化），但随后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()
4

1 回答 1

3

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

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

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

在如何使用

不要直接通过 marker.addEventListener 或 marker.on 将点击侦听器添加到您的标记，而是在 OverlappingMarkerSpiderfier 实例上添加一个全局侦听器。侦听器将被单击的标记作为其第一个参数传递。

这是一个香草js示例

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

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);
};

我看到你评论了

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

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

也许您已经看到了 Library Leaflet.markercluster，但也许它还有一些您可能需要的功能

于 2020-10-26T10:01:10.307 回答