使用 JQuery 1.4.3 和 JQuery-UI 1.8.5，在模态 JQuery 对话框内的 Google map 上拖放标记无法正常工作。
以下代码片段在 Chrome 6.0 和 Firefox 3.6.10 中重现了该问题(但在 Opera 10.63 中没有，令人惊讶的是，它没有这个问题)，并且在升级 JQuery 之前(从 1.3.x 和 JQuery-UI 1.7 开始)，这是有效的据我所知是 .x。)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<script language="javascript" type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA7wvJIKWNmIHy1Zz-OBol4hRU04i6YYXAaKMufrGA2zKwYVdFjhQttL37dNm-ct8ZuquPxt-MCn7PIw"></script>
<style type="text/css"> .ui-dialog { border:8px solid #ccc; } .ui-dialog-titlebar { border-bottom: 2px solid #ccc; padding: 4px; } .ui-dialog-titlebar a { display: none; } </style>
</head>
<body onunload="GUnload();">
<a href="#" class="open modal">Open modal</a>
<a href="#" class="open">Open non-modal</a>
<div id="popup" style="display:none;text-align:left;padding: 4px;">
<div id="map" class="map" style="width:400px;height:300px;"></div>
</div>
<script type="text/javascript">
$(function(){
$(".open").click(function(){
$("#popup").dialog({ modal:$(this).hasClass("modal"), // changing to false works ok
title:"Drag marker", width:450, position: "center",
buttons: { "Cancel": function(){ $(this).dialog("close"); } },
open: function() {
var map = new GMap2(document.getElementById("map"));
map.setCenter( new GLatLng(-37.851414,145.052686), 15);
map.addOverlay(new GMarker(new GPoint(145.052686, -37.851414), {draggable:true}));
}
});
}).eq(0).click();
});
</script>
</body>
</html>
请注意，样式很少，因为我找不到指向 JQuery-UI CSS/图像文件的快速 CDN 链接。
使用上述内容，当使用 modal:true 打开对话框时，标记(有时是 map )将“卡在”鼠标上，即未捕获 mouseup 事件。快速单击/移动有时会再次掉落，但通常您必须按 Esc 键才能关闭对话框。
使用 modal:false 打开允许正常拖动标记。
有什么方法可以解决这个问题，而不必使对话框成为非模式吗？
我发现了这个，http://forum.jquery.com/topic/modal-dialog-and-google-maps ，这似乎是同样的问题，但我不知道如何应用建议的答案。我尝试将 z-index:1000 添加到 div.map 但没有帮助。
最佳答案
这可以与 Google Maps Api v3 配合使用。 (版本 2 已弃用)。以下是 v3 Maps Api 的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<script language="javascript" type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style type="text/css"> .ui-dialog { border:8px solid #ccc; } .ui-dialog-titlebar { border-bottom: 2px solid #ccc; padding: 4px; } .ui-dialog-titlebar a { display: none; } </style>
</head>
<body>
<a href="#" class="modal">Open modal</a>
<a href="#" class="open">Open non-modal</a>
<div id="popup" style="display:none;text-align:left;padding: 4px;overflow:hidden">
<div id="map" class="map" style="width:400px;height:300px;"></div>
</div>
<script type="text/javascript">
$(function(){
$(".modal").click(function(){
$("#popup").dialog({ modal:$(this).hasClass("modal"), // changing to false works ok
title:"Drag marker", width:450, position: "center",
dragStart: function(e, ui) { e.stopPropagation() },
buttons: { "Cancel": function(){ $(this).dialog("close"); } },
open: function() {
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
draggable:true,
title:"Hello World!"
});
}
});
});
});
</script>
</body>
</html>
关于jquery - 如何修复 JQuery 对话框(1.4.2、1.8.5)内 Google map (v2) 的拖放操作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3957510/