我试图让我当前悬停的标记具有比其他标记更大的 z-index,这样即使它被其他标记隐藏,当我悬停在它上面时它也会获得完全可见性。
单击任何标记,我想做同样的事情。
google.maps.event.addListener(this.marker, 'mouseover', function() {
this.old_ZIndex = this.getZIndex(); //trying to get the current z- index
console.log(this.old_ZIndex); //this is undefined: why?
this.setZIndex(this.old_ZIndex + 100); //setting a higher z-index than all other markers
console.log("the old z index is ",this.old_ZIndex);
});
但是有了这个,我将无限增加 z 索引 .. 有没有其他方法可以让我在悬停或单击任何其他标记时恢复原状。 .
或者有什么更好的方法来实现它?
最佳答案
如果您之前没有在标记上设置 zIndex,无论是在初始化时还是使用 setOption() 函数,“this.getZIndex()”总是返回“undefined”。
如果标记超过 100 个,您的脚本也可能无法 100% 运行。
我在下面拼凑了一张非常简单的 map ,其中包含 2 个标记,略有重叠。在标记之一悬停时,它会将 zIndex 设置为将其带到顶部所需的最高值,然后将其返回到之前在鼠标移开时的状态:
var map;
var markers = new Array();
var highestZIndex = 0;
function initialize() {
/* SETUP MAP */
var myLatlng = new google.maps.LatLng(52.06768, -1.33758);
var mapOptions = {
center: myLatlng,
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
/* ADD 1st MARKER */
var markerOptions = {
position: new google.maps.LatLng(52.06768, -1.32058),
map: map,
zIndex:1
};
marker = createMarker(markerOptions, false);
marker.set("myZIndex", marker.getZIndex());
google.maps.event.addListener(marker, "mouseover", function() {
getHighestZIndex();
this.setOptions({zIndex:highestZIndex+1});
});
google.maps.event.addListener(marker, "mouseout", function() {
this.setOptions({zIndex:this.get("myZIndex")});
});
/* ADD 2nd MARKER */
var markerOptions = {
position: new google.maps.LatLng(52.06768, -1.33758),
map: map,
zIndex:2
};
marker = createMarker(markerOptions, false);
marker.set("myZIndex", marker.getZIndex());
google.maps.event.addListener(marker, "mouseover", function() {
getHighestZIndex();
this.setOptions({zIndex:highestZIndex+1});
});
google.maps.event.addListener(marker, "mouseout", function() {
this.setOptions({zIndex:this.get("myZIndex")});
});
}
function createMarker(markerOptions) {
var marker = new google.maps.Marker(markerOptions);
markers.push(marker);
return marker;
}
function getHighestZIndex() {
// if we haven't previously got the highest zIndex
// save it as no need to do it multiple times
if (highestZIndex==0) {
if (markers.length>0) {
for (var i=0; i<markers.length; i++) {
tempZIndex = markers[i].getZIndex();
if (tempZIndex>highestZIndex) {
highestZIndex = tempZIndex;
}
}
}
}
return highestZIndex;
}
关于google-maps - 在悬停时更改标记的 z 索引以使其可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9339431/