将 Google 地图街景小人置于标记下方答案

【问题标题】：Place the Google Maps pegman underneath markers将 Google 地图街景小人置于标记下方
【发布时间】：2012-02-19 21:57:57
【问题描述】：

我有一个使用 steetView 和一些地图标记的 Google V3 地图。黄色的小街景街景小人位于地图上标记的顶部。有没有办法改变 z-indexes 以便我的标记将在街景小人之上（这样就可以轻松点击它们而无需放大）？

如果有什么不清楚的，这里有一个小提琴...... 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});

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

【问题讨论】：

标签： javascript google-maps google-maps-api-3 google-api google-maps-markers

【解决方案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);
    }
});

您还需要在地图移动后更改街景小人的深度，这可以通过以下 sn-p 完成

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

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

【讨论】：

【解决方案2】：

好吧，这可能有点老套......（我希望我明白你在做什么）

1) 禁用街景控制 2) 使用比您拥有的标记更低的 zIndex 制作另一个控件。 3) 使用虚假街景标记的位置更新街景控件。

http://jsfiddle.net/z7Lp8/

【讨论】：

【解决方案3】：

您可以在 google.maps.Marker.MAX_ZINDEX 上方设置标记的 zIndex，以便街景小人保持在标记下方。 MAX_ZINDEX 是 API 将分配给标记的最大默认 z-index。仅当对地图上的所有标记关闭优化时，标记 z-index 才有效。

Forked fiddle from question to illustrate: http://jsfiddle.net/brendaz/t4v8nhoq/

    var marker1 = new google.maps.Marker({
      position: new google.maps.LatLng(54.975, -2.020),
      map: map,
      zIndex: google.maps.Marker.MAX_ZINDEX + 1,
      optimized: false
    });

【讨论】：