Javascript 使用谷歌地图API和MarkerWithLabel的标签和图像z索引问题

自从我发布以来，我对围绕图标执行框架的方式一直不满意。问题是帧与图标图片的z索引不同，因此帧与其他照片重叠

来实现我正在使用的框架和一个带有孔的.png

我用CSS和JS尝试了很多解决方案来解决这个问题，但似乎不明白为什么会发生这种情况。有趣的是，根据Chrome控制台，框架仅比标记图像高出1个z索引

我包括下面的代码示例，可以在这里看到

//显示地图
var map=new google.maps.map（document.getElementById（'map_canvas'）{
缩放：12，
中心：新google.maps.LatLng（49.47805，-123.84716），
mapTypeId:google.maps.mapTypeId.ROADMAP
});
//要在标记内部显示的图像
var marker_img={
网址：'http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.8/examples/home.jpg',
大小：新的google.maps.size（76,76），//掩码大小
来源：新google.maps.Point（10,10），//图像锚
anchor:new google.maps.Point（35,88），//掩码anchor
scaledSize:new google.maps.Size（95,95）//图像大小
};
//标记位置
变量位置=[
[49.45805, -123.84716],
[49.46805, -123.85716],
[49.47805, -123.86716]
];
//使用MarkerWithLabel在地图上放置标记
对于（变量i=0；i

比较错误元素的zIndex。看看不透明度，它被设置为0.01，这些元素是覆盖的MouseTargets，它们接收鼠标事件，但不可见。恐怕MarkerWithLabel库不是实现它的合适工具。一个更简单的解决方案：一个简单的标记（框架）和背景（猫）。请参阅：更简单、更好的解决方案。非常感谢。下面是修复更新站点的一部分。非常感谢。莫勒博士再次感谢你的帮助。网站更新：如果你想将此作为一个答案发布，我很乐意将其标记为解决方案，因为据我所知，不使用MarkerWithLabel是唯一的解决方案。

// display map
var map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 12,
    center: new google.maps.LatLng(49.47805, -123.84716),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});
// the image to display inside the marker
var marker_img = {
    url: 'http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.8/examples/home.jpg',
    size: new google.maps.Size(76, 76), // mask size
    origin: new google.maps.Point(10, 10), // image anchor
    anchor: new google.maps.Point(35, 88), // mask anchor
    scaledSize: new google.maps.Size(95, 95) // image size
};
// marker positions
var positions = [
    [49.45805, -123.84716],
    [49.46805, -123.85716],
    [49.47805, -123.86716]
];
// place markers on map with MarkerWithLabel
for (var i = 0; i < positions.length; i++) {
    var pictureLabel = document.createElement("img");
    pictureLabel.src = "http://iknowwhereyourcatlives.com/assets/img/frame.png";
    var homeLatLng = new google.maps.LatLng(positions[i][0], positions[i][4]);
    var marker = new MarkerWithLabel({
        position: homeLatLng,
        map: map,
        icon: marker_img,
        draggable: false,
        labelContent: pictureLabel,
        labelAnchor: new google.maps.Point(40, 98), // x,y
        labelClass: "labels label"+i, // the CSS class for the label
        labelStyle: {
            opacity: 1
        }
    });
}