JQuery Dialog 样式在第一次调用后闪烁答案

【问题标题】：JQuery Dialog style blinks after first callJQuery Dialog 样式在第一次调用后闪烁
【发布时间】：2013-06-04 00:55:34
【问题描述】：

这是我的问题：我在谷歌地图中创建了一定数量的标记。如果我点击一个标记，我会调用一个 jquerymobile 对话框。

这是我的问题：当我第一次单击标记（调用对话框）时，对话框以样式 ecc 显示。当我第二次单击标记时，样式消失了。谁能告诉我缺少什么？

谢谢你

这是一个代码示例

附言标记位于意大利:)

<!DOCTYPE html>
<html>

    <head>
        <title>Google Map Dialog</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>

        <script>

        var pos, map, address,myOptions;
                var marker= new Array();
                var markerME;

            function initialize() {


                    myOptions = {
                        zoom: 14,
                        mapTypeId: google.maps.MapTypeId.ROADMAP,
                    },
                    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      pos = new google.maps.LatLng(position.coords.latitude,
                                       position.coords.longitude);



            markerME = new google.maps.Marker({
            map: map,
            position: pos,
            });

 map.setCenter(pos);
    }, function() {
      handleNoGeolocation(true);
    });
  } else {
    // Browser doesn't support Geolocation
    handleNoGeolocation(false);
  }

      downloadUrl("http://ritapp.altervista.org/prova.php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("areacani");
        for (var i = 0; i < markers.length; i++) {

          var ID = markers[i].getAttribute("ID");
          var name = markers[i].getAttribute("Nome");
          address = markers[i].getAttribute("Indirizzo");
          var lat = markers[i].getAttribute("Lat");
          var lng = markers[i].getAttribute("Lng");
          var description = markers[i].getAttribute("Descrizione");
          var image =markers[i].getAttribute("Immagine");

            marker [i] = new google.maps.Marker({
            map: map,
            title: name,
            position: new google.maps.LatLng(lat,lng),
            });
            var html = "<h1>"+name+"</h1>";
            var html2= address;

            InfoWindow(marker[i], map, html, html2);
  }

      });

            }

      function InfoWindow(marker, map, html, html2, html3) {

      google.maps.event.addListener(marker, 'click', function() {

        $('#hed').html(html);
        $('#con').html(html2 + html3);
        $('#dialog-anchor').click();

        //calcRoute(pos,html2);

      });
    }


    function downloadUrl(url, callback) {

      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;


      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          callback(request, request.status);
        }
      };

      request.open('GET', url, true);
      request.send(null);
    }

    google.maps.event.addDomListener(window, 'initialize', initialize);

    function handleNoGeolocation(errorFlag) {
  if (errorFlag) {
    var content = 'Error: The Geolocation service failed.';
  } else {
    var content = 'Error: Your browser doesn\'t support geolocation.';
  }
}

           $(document).on("pageinit", "#home-page", function () {
                initialize();
           });


        </script>
    </head>

    <body>
        <!-- /DIV DELLA PAGINA  -->
        <div data-role="page" id="home-page">
            <!-- /header -->
            <div data-role="header" data-theme="c">
                 <h1>Google Map Dialog</h1>
            </div>
            <!-- /content -->
            <div data-role="content" class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
                <div id="map_canvas" style="height:300px;"></div>   
                <a href="#generic-dialog" id="dialog-anchor" style="display:none" data-rel="dialog"></a>
            </div>
        </div>
        <!-- / -->
        <div data-role="page" id="generic-dialog">
            <!-- /header -->
            <div id="hed" data-role="header" data-theme="d">
                 <!-- <h1>Generic Dialog</h1> -->
            </div>
            <!-- /content -->
            <div id ="con" data-role="content" data-theme="c">



            </div>

        </div>

    </body>

</html>

【问题讨论】：

标签： jquery jquery-mobile google-maps-api-3 google-maps-markers

【解决方案1】：

当您调用 $('#hed').html(html); 时，您会覆盖 hed div 的所有内容，这意味着关闭跨度和所有样式类都将丢失。由于参数 html 是您的<h1>，因此对话框的样式被破坏了。

调用第二次点击后的样子：<div id="hed" data-role="header" data-theme="d" class="ui-header ui-bar-d" role="banner"><h1>Giardino Alessandrini</h1></div>

要使用您当前的代码更正它，请使用以下代码：

  function InfoWindow(marker, map, html, html2, html3) {

  google.maps.event.addListener(marker, 'click', function() {

    if ($('#hed h1').length > 0) {
       $('#hed h1').text($(html).text());
    } else {
    $('#hed').html(html);
    }
    $('#con').html(html2 + html3);
    $('#dialog-anchor').click();

    //calcRoute(pos,html2);

  });

【讨论】：