Question

我正在尝试找出如何定位地图标记以自定义其z-index，以便它们始终位于底部。现在，有些掩盖了其他更重要的地图标记。

我使用高级自定义字段创建了一个名为“ Locations”和Im的自定义帖子类型，因此我没有手动创建每个位置，因此我不能像大多数解决方案所示那样在javascript中手动设置z-index。

这是我到目前为止所拥有的。我从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会在其他标记的顶部显示地图底部的标记，以便与之相关。但是我该如何覆盖呢？

Here is the map when it is first loaded

Here is the map when you move it

带点的图钉是我要放置在其他标记后面的图钉。

Answer 1

这就是答案

Doc2Vec

有没有办法在多个标记中设置一个地图标记的z索引？

1 个答案: