Как исправить перетаскивание для карты Google (v2) в диалоге JQuery (1.4.2, 1.8.5)? - PullRequest
Новая
       3

Как исправить перетаскивание для карты Google (v2) в диалоге JQuery (1.4.2, 1.8.5)?

2 голосов
/ 18 октября 2010

Перетаскивание маркера на карте Google в модальном диалоговом окне JQuery не работает должным образом с использованием JQuery 1.4.3 и JQuery-UI 1.8.5.

Следующий фрагмент воспроизводит проблему в 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>

Обратите внимание, стилизация минимальна, так как я не смог найти быструю ссылку CDN на файлы CSS / изображений JQuery-UI.

Используя вышеизложенное, при открытии диалога с modal:true маркер (а иногда и карта) застревает в мышке, то есть событие mouseup не перехватывается.Быстрое нажатие / перемещение иногда приводит к его повторному падению, но обычно вам нужно нажать клавишу escape, чтобы закрыть диалоговое окно.

Открытие с помощью modal:false позволяет перетаскивать маркер в обычном режиме.способ исправить это, не делая диалог немодальным?

Я нашел это, http://forum.jquery.com/topic/modal-dialog-and-google-maps,, что, кажется, та же проблема, но я не могу понять, как применить ответпредложил.Я пытался добавить z-index:1000 к div.map, но это не помогло.

1 Ответ

1 голос
/ 18 октября 2010

Это правильно работает с 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>
...