WebSocketを使用して追加された多くのマーカーを含むGoogleマップを使用しています。データの可用性に基づいてカスタムマーカー画像を使用しています。最新のマーカーがマップ内の他のすべての要素の上にあるようにします。
どうすればいいですか?
コード:
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());
更新
次のように、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,
});
});
たぶんそれがマーカーがInfoWindowの背後に表示される理由です。 zIndexを使用して更新しようとしましたが、マーカーはまだInfoWindowの背後に表示されています。
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>
デフォルトでは、マップはマップの下のマーカーのz-indexを高くし、マーカーが上下に見えるようにします
マーカーにzIndex
オプションを設定できます。マーカーを追加し、それをマーカーオプションオブジェクトに追加するときに、増分zIndexカウンターを作成する必要があります。
marker=new google.maps.Marker({
position:pin,
icon:markerIcon,
zIndex: counterValue
});
基本開始値が何である必要があるのかよくわかりません
ZIndexオプションと組み合わせて、マーカーオプション「optimized」をfalseに設定する必要があります。
var marker=new google.maps.Marker({
position:pin2,
optimized: false,
zIndex:99999999
});
これで問題が解決するはずです。
問題が解決しました。 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
});
googleマップドキュメント にあるように、円のz-indexは、マーカーのz-indexではなく、他のポリゴンのz-indexと比較されることに注意してください。