Есть ли способ установить z-индекс одного маркера карты из нескольких маркеров? - PullRequest
Новая
       7

Есть ли способ установить z-индекс одного маркера карты из нескольких маркеров?

0 голосов
/ 15 февраля 2019

Я пытаюсь выяснить, как нацелить маркеры карты, чтобы настроить их z-индекс, чтобы они всегда были внизу.Прямо сейчас некоторые прикрывают другие более важные маркеры карты.

Я создал пользовательский тип записи под названием «Местоположения», и я использую расширенные настраиваемые поля, поэтому я не создаю каждое местоположение вручную, поэтому я не могу просто установитьz-индекс в javascript вручную, как показывает большинство решений.

Это то, что я имею до сих пор.Начало кода, которое я получил с веб-сайта acf: 

(function ($) {

function new_map($el) {
    var $markers = $el.find('.marker');
    var args = {
        zoom: 14,
        center: new google.maps.LatLng(0, 0),
        scrollwheel: false,
        navigationControl: false,
        mapTypeControl: false,
        scaleControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    };

    var map = new google.maps.Map($el[0], args);
    map.markers = [];
    map.infowindows = [];

    // add markers
    $markers.each(function () {
        add_marker($(this), map);
    });

    center_map(map);
    return map;
}

function center_map(map) {

    var bounds = new google.maps.LatLngBounds();

    $.each(map.markers, function (i, marker) {
        var latlng = new google.maps.LatLng(marker.position.lat(), marker.position.lng());
        bounds.extend(latlng);
    });

    if (map.markers.length == 1) {
        map.setCenter(bounds.getCenter());
        map.setZoom(14);
    } else {
        map.fitBounds(bounds);
    }
}

function add_marker($marker, map) {

    var path = '';
    if(window.location.hostname == 'localhost'){
        path = '/go-dental-365-wordpress-theme';
    }

    // var
    var latlng = new google.maps.LatLng($marker.attr('data-lat'), $marker.attr('data-lng'));
    var base = path + '/wp-content/themes/go-dental-365/assets/images/';
    // var area = new ($marker.attr('data-area'));
    // create marker
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon: base + 'non-active-pin.png',
        category: $marker.attr('data-area'),
        clickable: false
    });

    // add to array
    map.markers.push(marker);

    if(marker.category == 'supported-offices'){
        marker.setZIndex(100);
    }

    // if marker contains HTML, add it to an infoWindow
    if ($marker.html()) {

        // create info window
        var infowindow = new google.maps.InfoWindow({
            content: $marker.html()
        });

        map.infowindows.push(infowindow);

        // show info window when marker is clicked
        google.maps.event.addListener(marker, 'click', function () {
            for (var i = 0; i < map.infowindows.length; i++) {
              map.infowindows[i].close();
            }
            infowindow.open(map, marker);
        });
    }

// Control Map Pin state
    $('.locations-nav-container > div').on('click', function(e){
        e.preventDefault();
        var nav = $(this).attr('data-nav');
        var infowindow;

        $('div').removeClass('active');
        $(this).addClass('active');

        for (var i = 0; i < map.infowindows.length; i++) {
          map.infowindows[i].close();
        }

        for (var j = 0; j < map.markers.length; j++) {
            map.markers[j].setIcon(base + 'non-active-pin.png');
            map.markers[j].setClickable(false);
            if(map.markers[j].category == nav || nav == 'view-all'){
                if(map.markers[j].category == 'supported-offices'){
                    map.markers[j].setIcon(base + 'supporting-pin.png');
                } else {
                    map.markers[j].setIcon(base + 'available-pin.png');
                }
                map.markers[j].setClickable(true);
            }
        }

    });
}

var map = null;

$(document).ready(function () {
    $('.map').each(function () {
        map = new_map($(this));
    });
    $('.locations-nav-container > div:first-child').trigger('click');
});
})(jQuery);

Маркеры карты, имеющие категорию «поддерживаемые офисы», - это те, которые я хочу всегда находиться внизу всех других карт.маркеры.Код работает, когда карта загружается впервые, но как только вы перемещаете карту, маркеры переключаются.По умолчанию я знаю, что Google будет отображать маркеры, которые находятся внизу карты поверх других маркеров, так что это может иметь какое-то отношение к этому.Но как мне переопределить это?

Вот карта, когда она впервые загружена

Вот карта, когда вы ее перемещаете

Булавки с точкой - это те, которые я хочу разместить позади других маркеров.

1 Ответ

0 голосов
/ 15 февраля 2019

Это ответ 

if(marker.category == 'supported-offices'){
    marker.setZIndex(google.maps.Marker.MAX_ZINDEX - 1);
} else {
    marker.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
}
...