Javascript 指定 Google 地图标记的 z-index
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14034292/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Specify the z-index of Google Map Markers
提问by ATOzTOA
I am having a Google Map with lots of markers added using websockets. I am using custom marker images based on data availability. I want to make sure the newest marker stays on top of all other elements in the map.
我有一个谷歌地图，其中有很多使用 websockets 添加的标记。我正在使用基于数据可用性的自定义标记图像。我想确保最新的标记位于地图中所有其他元素的顶部。
How do I do this?
我该怎么做呢？
Code:
代码：
circleIcon = {
path: google.maps.SymbolPath.CIRCLE,
fillColor: "blue",
fillOpacity: 1,
scale: 2,
strokeColor: "red",
strokeWeight: 10
};
coordinates = image[2].split(',');
pin=new google.maps.LatLng(coordinates[0], coordinates[1]);
if(marker) {
marker.setMap(null);
}
if(image[0] != "NOP") {
var markerIcon = circleIcon;
} else {
var markerIcon = image_car_icon;
}
marker=new google.maps.Marker({
position:pin,
icon:markerIcon
});
marker.setMap(map);
map.setCenter(marker.getPosition());
Update
更新
I am using jquery to update the z-index of the InfoWindow, like:
我正在使用 jquery 更新 InfoWindow 的 z-index，例如：
popup = new google.maps.InfoWindow({
content:'<image id="pin_' + pin_count + '" src="data:image/png;base64,' + image[1] +'"/>',
});
popup.open(map, marker);
google.maps.event.addListener(popup, 'domready', function() {
console.log("DOM READY...........................");
// Bring latest Image to top
e = $('#pin_' + pin_count).parent().parent().parent().parent();
e.css({
'z-index' : 99999 + pin_count,
});
});
Maybe that's why the marker shows behind the InfoWindow. I tried updating using zIndex, but the marker still shows behind the InfoWindow:
也许这就是标记显示在信息窗口后面的原因。我尝试使用 zIndex 进行更新，但标记仍显示在 InfoWindow 后面：
marker=new google.maps.Marker({
position:pin,
zIndex: 9999999 + pin_count,
icon:markerIcon
});
Update
更新
Sample code. I expect the "green circle" icon marker to be behind the "pin" icon marker.
示例代码。我希望“绿色圆圈”图标标记位于“图钉”图标标记后面。
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=&sensor=false"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
var london = new google.maps.LatLng(51.508742,-0.120850);
function initialize()
{
var pin1=new google.maps.LatLng(51.508742, -0.120850);
var pin2=new google.maps.LatLng(51.508642, -0.120850);
var mapProp = {
center:pin1,
zoom:17,
disableDefaultUI:true,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var marker=new google.maps.Marker({
position:pin2,
zIndex:99999999
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
infowindow.open(map,marker);
circleIcon = {
path: google.maps.SymbolPath.CIRCLE,
fillColor: "blue",
fillOpacity: 1,
scale: 2,
strokeColor: "green",
strokeWeight: 10
};
var marker2=new google.maps.Marker({
position:pin1,
icon:circleIcon,
zIndex:99999
});
marker2.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
采纳答案by charlietfl
By default map will make z-index higher for markers lower on the map so they visibly stack top to bottom
默认情况下，地图会使地图上较低的标记的 z-index 更高，因此它们可以明显地从上到下堆叠
You can set zIndexoption for a marker. You would just need to create a increment zIndex counter as you add markers and add that to the marker options object:
您可以zIndex为标记设置选项。您只需要在添加标记并将其添加到标记选项对象时创建一个增量 zIndex 计数器：
marker=new google.maps.Marker({
position:pin,
icon:markerIcon,
zIndex: counterValue
});
I'm not quite sure what the base start value needs to be
我不太确定基本起始值需要是什么
回答by K. Wils
You have to set the marker option "optimized" to false in combination with the zIndex option.
您必须结合 zIndex 选项将标记选项“优化”设置为 false。
var marker=new google.maps.Marker({
position:pin2,
optimized: false,
zIndex:99999999
});
This should solve your problem.
这应该可以解决您的问题。
回答by Eric Martin
Problem solved. Just set the zValue to 999 (I'm guessing higher will bring it more to the top) and it should come to the top. I guess the default is below 999:
问题解决了。只需将 zValue 设置为 999（我猜更高会使它更多地到达顶部）并且它应该到达顶部。我猜默认值低于 999：
var zValue;
if (someCondition) {
zValue = 999;
}
var marker = new google.maps.Marker({
map: map,
position: {lat: lat, lng: lng},
title: titleString,
icon: image,
zIndex: zValue
});
回答by Txaku
Take care that as it says in the google map documentationthe z-index of a circle will be compared to the z-index of other polygons and not to the z-index of the markers.
请注意，正如谷歌地图文档中所说，圆的 z-index 将与其他多边形的 z-index 进行比较，而不是与标记的 z-index 进行比较。
