41

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,
    });
});

おそらくそれが、マーカーがインフォウィンドウの後ろに表示される理由です。zIndexを使用して更新しようとしましたが、マーカーがインフォウィンドウの後ろに表示されます。

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>
4

4 に答える 4

55

zIndexオプションと組み合わせて、マーカーオプション「optimized」をfalseに設定する必要があります。

var marker=new google.maps.Marker({
      position:pin2,
      optimized: false,
      zIndex:99999999
});

これで問題が解決するはずです。

于 2015-09-17T12:36:13.303 に答える
38

デフォルトでは、マップは、マップ上でマーカーが下にある場合、z-indexを高くするため、上から下にスタックします。

zIndexマーカーのオプションを設定できます。マーカーを追加し、それをマーカーオプションオブジェクトに追加するときに、増分zIndexカウンターを作成する必要があります。

marker=new google.maps.Marker({
    position:pin,
    icon:markerIcon,
    zIndex: counterValue
});

基本開始値が何である必要があるのか​​よくわかりません

于 2012-12-25T22:30:08.117 に答える
4

問題が解決しました。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
});
于 2015-01-22T20:41:46.560 に答える
1

グーグルマップのドキュメントに記載されているように、円のz-indexは、マーカーのz-indexではなく、他のポリゴンのz-indexと比較されることに注意してください。

于 2013-02-19T13:10:10.703 に答える