Question

使用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&amp;v=2&amp;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打开对话框时，标记（有时是地图）将“卡住”鼠标，即未捕获鼠标事件。快速单击/移动有时会再次丢弃它，但通常您必须按下转义才能关闭对话框。

使用modal:false打开可以正常拖动标记。

有没有办法解决这个问题而不必使对话非模态？

我发现这个http://forum.jquery.com/topic/modal-dialog-and-google-maps，这似乎是同样的问题，但我无法弄清楚如何应用建议的答案。我已尝试将z-index:1000添加到div.map，但它没有帮助。

Answer 1

这适用于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对话框（1.4.2,1.8.5）中修复Google地图（v2）的拖放操作？

1 个答案: