我有一个填充了通过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);
}
答案 0 :(得分:-1)
我终于找到了解决方法。我只是将z-index设置为-1。
$(this).closest("tr").prev("tr").find("input").val()
在标记侦听器onClick中,我将z-index设置为5。
$("a#close").click(function(){
$("div#map_message").hide().css("z-index", -1);
});