Właśnie odkrywam NotniaczemarkerspiderFier do ulotki i myślę, że może być niezwykle przydatne (pamiętaj, że wersja ulotki oferuje mniej opcji niż wersja Mapy Google, ale jestem ograniczony do ulotki).

Była to miejsce tylko kilka minut, aby dodać go istniejącym projektem, ale mam jeden mały problem :-(

Kiedy klikam z nich dowolny marker

enter image description here

Widzę markery na krótko rozszerzają się (spiderify), ale następnie OnClick() pożarów markera (przenoszenie mnie do nowego stanu, pokazując nową stronę, bez mapy).

Domyślam się, że mogę zmienić mój kod, aby nie dodać OnClick() obsługi markera, dopóki się nie rozszerzy, a następnie dodaj go, aby tylko kliknąć rozszerzonym (spidryfikowany znacznik na markerze.

Moje pytanie brzmi, czy jest to podejście, które jest ogólnie pobierane. Jak Ty ?

Oto mój kod AngularJS, który dodaje znacznik na mapę, na wypadek, gdyby pomoże.

    // +=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=
    /** 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()
1
Mawg says reinstate Monica 18 październik 2020, 14:41

1 odpowiedź

Najlepsza odpowiedź

Możesz dodać do zdarzenia OMS Click Event:

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

Jest to trochę mylące, ale wydarzenie click jest wywoływane tylko wtedy, gdy markery spiderfied i klikniesz na określony znacznik lub jest markerem, który nie znajduje się w pająk "grupie"

W Jak używać

Zamiast dodawać słuchaczy kliknięć do znaczników bezpośrednio przez Marker.addeventlistener lub marker.on, dodaj globalny słuchacz na instancji nakładkującegoMarkerspiderFier. Słuchacz zostanie przekazany kliknięty znacznik jako pierwszy argument.

Tutaj wanilia JS Przykład

Myślę, że twój kod powinien wyglądać:

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

Widziałem, że skomentowałeś

// zobacz https://lufletjs.com/reference-1.4.0.html#popup.

Jest to Doc of the Leaflet Wersja 1.4.0 Obecna wersja to 1.7.1 Uważaj, że używasz prawidłowego;)

I prawdopodobnie widziałeś już bibliotekę ulotki.Markerclaster ale może ma kilka funkcji, które ty może potrzebować

2
Falke Design 26 październik 2020, 10:01