指定Google地图标记的z-index [英] Specify the z-index of Google Map Markers
问题描述
我有一个Google地图，有很多使用websockets添加的标记。我正在使用基于数据可用性的自定义标记图像。我想确保最新的标记保持在地图中所有其他元素的顶部。
我该怎么做？
代码：
circleIcon = {
path：google.maps .SymbolPath.CIRCLE，
fillColor：blue，
fillOpacity：1，
比例：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（））;
更新
我正在使用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 ............. ..............）;
//将最新的图像置顶
e = $（'＃pin_'+ pin_count）.parent（）父类（）;
e.css（{
'z-index'：99999 + pin_count，
}）;
}）;
也许这就是InfoWindow后面显示标记的原因。我尝试使用zIndex进行更新，但标记仍显示在InfoWindow后面：
marker = new google.maps.Marker（{ b $ b位置：pin，
zIndex：9999999 + pin_count，
icon：markerIcon
}）;
更新
示例代码。我希望绿色圆圈图标标记位于图钉图标标记后面。
<！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）;
函数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（{
位置：pin1，
图标：circleIcon，
zIndex：99999
}）;
marker2.setMap（map）;
}
google.maps.event.addDomListener（window，'load'，initialize）;
< / script>
< / head>
< body>
< div id =googleMapstyle =width：500px; height：380px;>< / div>
< / body>
< / html>
默认情况下，地图会使地图上较低标记的z-index更高，因此它们明显地从上到下堆叠。您可以将 c $ c>标记的选项。您只需在添加标记并将其添加到标记选项对象时创建一个增量zIndex计数器： 我不太确定基本起始值需要多少 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. How do I do this? Code: Update I am using jquery to update the z-index of the InfoWindow, like: Maybe that's why the marker shows behind the InfoWindow. I tried updating using zIndex, but the marker still shows behind the InfoWindow: Update Sample code. I expect the "green circle" icon marker to be behind the "pin" icon marker. zIndex
marker = new google.maps.Marker（{
position：pin，
icon：markerIcon，
zIndex：counterValue
}）;
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());
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,
});
});
marker=new google.maps.Marker({
position:pin,
zIndex: 9999999 + pin_count,
icon:markerIcon
});
<!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 default map will make z-index higher for markers lower on the map so they visibly stack top to bottom
You can set zIndex option 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:
marker=new google.maps.Marker({
position:pin,
icon:markerIcon,
zIndex: counterValue
});
I'm not quite sure what the base start value needs to be
这篇关于指定Google地图标记的z-index的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
