我正在尝试找出如何定位地图标记以自定义其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
带点的图钉是我要放置在其他标记后面的图钉。
答案 0 :(得分:0)
这就是答案
Doc2Vec