代码之家 › 专栏 › 技术社区 › Tom Gruff

如何修复jquery对话框(1.4.2,1.8.5)中Google地图(v2)的拖放?

google-maps jquery-ui jquery

2

Tom Gruff · 技术社区 · 16 年前

使用jquery1.4.3和jqueryui1.8.5在模式jquery对话框中在Google地图上拖放标记无法正常工作。

下面的代码片段在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>

注意,样式是最小的,因为我找不到jqueryui css/image文件的快速cdn链接。

使用上述方法打开对话框时, modal:true 标记(有时还有地图)会被“卡”到鼠标上,即未捕获mouseup事件。快速单击/移动有时会再次将其放下,但通常必须按Escape关闭对话框。

开放与 modal:false 允许正常拖动标记。

是否有任何方法可以在不需要将对话框设置为非模态的情况下解决此问题?

我找到了这个, http://forum.jquery.com/topic/modal-dialog-and-google-maps 这似乎是同样的问题,但我不知道如何应用建议的答案。我试着补充 z-index:1000 到 div.map 但没用。

1 回复 | 直到 16 年前

1

Michal 16 年前

这与谷歌地图api v3一起工作正常。(版本2已弃用)。下面是v3映射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>