Маркеры Mapbox не учитывают Zindex

В приложении mapbox, которое я создаю, я загружаю несколько маркеров на страницу в зависимости от геолокации пользователей, проблема заключается в том, что мне нужно, чтобы определенные маркеры были выше других, но маркеры не учитывают zIndex, который я установил. Вот мой код.

function addMarker(type, radius, height, lat, long, id, special, name) {
    var circle_options;
    switch (type) {
        case marker.RESTRICTED:
            circle_options = {
                color: '#D90000',
                fillColor: '#D90000',  // Fill color
                fillOpacity: 0.4,    // Fill opacity
                stroke: false,
                zIndexOffSet: -1

            };
            break;

        case marker.NOT_RECOMMENDED:
            circle_options = {
                color: '#FF8000',
                fillColor: '#FF8000',  // Fill color
                fillOpacity: 0.75,    // Fill opacity
                stroke: false,
                zIndexOffSet: 1000

            };
            break;
        case marker.USER_RECOMMENDED:
            circle_options = {
                color: '#9FCC1C',
                fillColor: '#9FCC1C',  // Fill color
                fillOpacity: 0.75,    // Fill opacity
                stroke: false,
                zIndexOffSet: 1000

            };
            break;
        case marker.APPROVED:
            circle_options = {
                color: '#006ADC',
                fillColor: '#006ADC',  // Fill color
                fillOpacity: 0.75,
                stroke: false,
                zIndexOffSet: 1000
            };
            break;
    }
    var mark = L.circle([
   lat, long
    ], radius * 1609.34, circle_options);

    if (nav.currentPage() == 'location-details') {
        if (mapElement) {
            mapElement.setView([lat, long], zoomMap[radius])
            mapElement.removeLayer(use);
            mapElement.removeLayer(ic);

        }
    }
    else if (nav.currentPage() == 'home') {
        mark.objectId = id;
        circles.push(mark);
    }
    mark.on('click', function (e) {
        var self = id;
        circles.some(function (item) {
            if (self == item.objectId) {
                nav.navigate('location-details', false, item.objectId);
                return true;
            }
        });
    })
    mark.addTo(mapElement)
}

person Elias Nichols    schedule 14.08.2014    source источник
comment
почему бы просто не добавить маркеры в том порядке, в котором вы хотите, чтобы они отображались? В Mapbox нет функций для z-index.   -  person Vincent McNabb    schedule 25.01.2015
comment
L.Circle расширяет L.Path, чтобы вы могли использовать методы bringToFront() и bringToBack(). Но это не позволяет вам точно контролировать z-индекс, см. этот запрос функции . И Винсент прав насчет порядка: см. Могу ли я с помощью JavaScript изменить Z-индекс/слой элемента SVG ‹g›?   -  person slaur4    schedule 20.02.2015
comment
Можете ли вы сделать для него jsfiddle?   -  person BDD    schedule 25.04.2015
comment
Вы используете позиционированные элементы? developer.mozilla.org/en-US/docs/Web/ CSS/z-индекс   -  person user2182349    schedule 29.04.2015


Ответы (1)


Похоже, среди параметров пути нет параметра zIndexOffSet. может передаваться в качестве последнего параметра в L.Circle().

Хотя есть опция className, которую вы можете использовать для назначения пользовательских классов с различными предустановленными z-индексами для ваших маркеров.

person dekkard    schedule 29.04.2015