javascript - 将 Google map 街景小人放在标记下方

Question

我有一个使用 steetView 和一些 map 标记的 Google V3 map 。 黄色的街景小街景小人位于 map 上标记的上方。 有没有办法更改 z 索引，以便我的标记位于街景小人上方 (这样就可以轻松点击它们而无需放大)？

如果有任何不清楚的地方，这里有一个 fiddle .... http://jsfiddle.net/spiderplant0/BRkCA/

经过一些试验，我想出了这个……

$("#map_canvas img[src*=cb_scout]").parent("div").css({'zIndex': -200});
$($("#map_canvas img[src*=cb_scout]")[1]).parent("div").parent("div").css({'zIndex': -200});

这会迫使街景小人坐在标记下方，但现在街景小人不再可拖动，每次移动 map 等时，街景小人都会再次跳到标记上方。

Answer 1

为了让街景小人保持在您的标记之下，您可以观察 pov_changed 事件并在短暂延迟后重置 z-index

$google.maps.event.addListener(panorama, 'pov_changed', function() {
    var func=function(){
        $("#map_canvas img[src*=cb_scout]").parent("div").css({'zIndex': -200});
    }
    setTimeout(func,1000);
    }
});

您还需要在 map 移动后更改街景小人的深度，这可以通过以下代码片段完成

google.maps.event.addListener(map, 'idle', function() {
                google.maps.event.trigger(panorama, 'pov_changed');
    })

如果您希望能够拖动街景小人，您必须首先通过切换按钮交换街景小人的深度将其放置在标记上方，并向 pov_changed 事件处理程序添加一个异常以防止街景小人在切换按钮时掉落深度处于事件状态。