Javascript 谷歌地图覆盖信息赢得'；不要躲起来

我有一个通过AJAX到php服务器调用检索的标记填充的映射。在AJAX返回时，我循环遍历每个标记，并设置一个onClick侦听器来打开一个重叠的映射消息

一切正常。标记显示，当我单击标记时，消息显示为重叠。但在我点击关闭消息，并以任何方式拖动、缩放或更改地图后，消息会重新出现。它不会一直隐藏

我注意到的另一件事是，如果我单击一个标记，然后单击另一个，消息将更改为新标记消息。但是，如果我拖动地图，消息开始在上一个标记的消息和当前标记的消息之间来回移动，直到我停止拖动它，它稳定到当前标记的消息。我不知道这些问题是否相关。如有任何建议，将不胜感激。谢谢

//create map
var mapOptions = {
    zoom: 3,
    center: defaultLatLng,
    minZoom: 3,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map($("div#map_canvas").get(0), mapOptions);

//send ajax requesting markers
$.ajax({
    ...
    success: function(data) {
        $.each(data, function(index, value) {
            var markerLat = value.lat;
            var markerLng = value.lng;

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(markerLat, markerLng),
                map: map        
            });
            marker.id = value.id; //set the marker id

            var markerListener = google.maps.event.addListener(marker, "click", function(event){
                /*****move map position****/
                map.setCenter(marker.getPosition());

                //send ajax requesting data based on id of marker clicked
                $.ajax({
                    ...
                    success: function(data) {
                        //actual message 
                        var html = "<a id='close' href='#'>close</a>" 
                            + "<p>" + data.message + "</p>";
                        setMapMessage(html, map);
                    } //end success for markerListener
                }); //end ajax for markerListener
            });  //end markerListener
        }); //end $.each()
    } //end success for ajax getting all the markers
}); //end ajax for getting all the markers

function setMapMessage(message, map){
    //Create custom message
    var overlay = new google.maps.OverlayView();
    overlay.draw = function() {
        $("#map_message").html(message).show();
        $("a#close").click(function(){
            $("#map_message").hide();
        });

        //get the coordinates of the map (used to set X and Y of the map_message)
        var mapPosition = $("#map_canvas").position(); 

        var mapContainerX = mapPosition.left;
        var mapContainerY = mapPosition.top;

        $("#map_message").css({
            top: mapContainerY,
            left: mapContainerX 
        });
    };
    overlay.setMap(map);
}

//创建映射
变量映射选项={
缩放：3，
中心：DefaultLatling，
minZoom:3，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（$（“div#map_canvas”）.get（0），mapOptions）；
//发送ajax请求标记
$.ajax({
...
成功：功能（数据）{
$.each（数据、函数（索引、值）{
var markerLat=value.lat；
var markerLng=value.lng；
var marker=new google.maps.marker({
职位：新google.maps.LatLng（markerLat，markerLng），
地图：地图
});
marker.id=value.id；//设置标记id
var markerListener=google.maps.event.addListener（标记，“单击”，函数（事件）{
/*****移动地图位置****/
map.setCenter（marker.getPosition（））；
//根据单击的标记id发送ajax请求数据
$.ajax({
...
成功：功能（数据）{
//实际信息
var html=“”
+“”+data.message+“
”；
setMapMessage（html，map）；
}//markerListener的结束成功
})；//结束markerListener的ajax
})；//结束标记列表器
})；//end$.each（）
}//ajax获得所有标记的最终成功
}); //结束ajax以获取所有标记
函数setMapMessage（消息，映射）{
//创建自定义消息
var overlay=new google.maps.OverlayView（）；
overlay.draw=函数（）{
$（“#map_message”）.html（message.show（）；
$（“关闭”）。单击（函数（）{
$（“#映射#消息”）.hide（）；
});
//获取地图的坐标（用于设置地图信息的X和Y）
var mapPosition=$（“#map_画布”）.position（）；
var mapContainerX=mapPosition.left；
var mapContainerry=mapPosition.top；
$（“#地图信息”）.css({
上图：地图集装箱，
左：mapContainerX
});
};
覆盖.setMap（map）；
}

我终于找到了解决办法。我只是将z-index设置为-1

$("a#close").click(function(){
    $("div#map_message").hide().css("z-index", -1);
});

在标记侦听器onClick中，我将z索引设置为5

var markerListener = google.maps.event.addListener(marker, "click", function(event){
    /*****move map position****/
    map.setCenter(marker.getPosition());

    //send ajax requesting data based on id of marker clicked
    $.ajax({
        ...
        success: function(data) {
            //actual message     
            var html = "<a id='close' href='#'>close</a>" 
                + "<p>" + data.message + "</p>";
            setMapMessage(html, map);
            $("div#map_message").css("z-index", 5);
        } //end success for markerListener
    }); //end ajax for markerListener
});  //end markerListener

var-markerListener=google.maps.event.addListener（标记，“单击”，函数（事件）{
/*****移动地图位置****/
map.setCenter（marker.getPosition（））；
//根据单击的标记id发送ajax请求数据
$.ajax({
...
成功：功能（数据）{
//实际信息
var html=“”
+“”+data.message+“
”；
setMapMessage（html，map）；
$（“div#map_message”）.css（“z-index”，5）；
}//markerListener的结束成功
})；//结束markerListener的ajax
});  //末端标记列表器

什么是

$（“#map_message”）

？$（“#map_message”）和$（#map_canvas）是分开的，即使消息的快速移动仍然是一个麻烦