我正在动态添加带有InfoWindows的Google Map。问题是,当两个InfoWindows重叠时,最近的窗口将不会总是位于较旧的窗口之上。

如何使用Javascript / jQuery确保后面的InfoWindow始终显示在所有其他InfoWIndows的顶部?

当我通过websocket接收新图像和坐标时,将添加InfoWindows。这是我的代码:

function addToMap(image) {
    console.log("In addToMap...");

    coordinates = image[2].split(',');
    pin=new google.maps.LatLng(coordinates[0], coordinates[1]);

    if(marker) {
        marker.setMap(null);
    }

    var markerIcon = image_car_icon;

    marker=new google.maps.Marker({
        position:pin,
        zIndexProcess: function( m )
        {
            return 9999999 + pin_count;
        },
        icon:markerIcon
    });

    marker.setMap(map);

    map.setCenter(marker.getPosition());

    pin_count++;

    if(image[0] != "NOP") {
        popup = new google.maps.InfoWindow({
            content:'<image id="pin_' + pin_count + '" src="data:image/png;base64,' + image[1] +'"/>',
        });

        popup.open(map, marker);
    }
}


弹出窗口是我获取新图像时创建的InfoWindow。假设两个图像的坐标几乎相同,我希望第二个InfoWindow在顶部(z索引)。但是,大多数情况下,第一个窗口停留在顶部。

最佳答案

我找到了解决方案。我正在通过使用图像作为手柄来手动修改标记的z索引。 marker_count是运行中的标记,因此z-index将大于前一个标记。

google.maps.event.addListener(popup, 'domready', function() {
    console.log("DOM READY...........................");

    // Bring latest Image to top
    e = $('#pin_' + img_count).parent().parent().parent().parent();

    e.css({
        'z-index' : (99999 + marker_count),
    });
});

09-11 00:44