ajax jquery ui模式对话框中的谷歌地图渲染问题答案

【问题标题】：google map render issue in ajax jquery ui modal dialogajax jquery ui模式对话框中的谷歌地图渲染问题
【发布时间】：2016-06-22 11:35:59
【问题描述】：

我有 jquery ui 模式对话框。 jquery ui 对话框内容显示使用 ajax 调用。我的问题是当我打开 jquery 对话框第一次成功加载地图时。第二次打开对话框时无法在对话框中加载地图。我尝试检查，但第二次打开对话框时 div 的内容为空。

我尝试了许多 stackoverflow 答案，但它们对我不起作用。因为我不只是对话问题。我想我可能对来自 ajax 的内容也有疑问。你可以看到我的google map api函数来显示地图。

 var map = '';
  function googleMap(selector, lat, lng) {
     alert(map);
       var myLatlng = new google.maps.LatLng(lat, lng);
        // var map;
        var mapOptions = {
          zoom: 4,
         center: new google.maps.LatLng(23.6459, 81.9217),
           mapTypeId: google.maps.MapTypeId.ROADMAP
             };
       if (!map) {
             map = new google.maps.Map(document.getElementById('googlemaps'), mapOptions);
                      var marker = new google.maps.Marker({
                                        position: map.getCenter(),
                                        map: map
                                    });
        google.maps.event.addListener(map, "click", function () {
       document.getElementById("latitude").value = map.getCenter().lat();
        document.getElementById("longitude").value = map.getCenter().lng();
         marker.setPosition(map.getCenter());
});
} else {
              google.maps.event.trigger(map, "resize");
              map.setOptions(mapOptions);
                        }
 }

我的 jquery ui 对话框（地图）内容从 ajax 调用中获取。

您可以帮助解决我的问题。

请查看我下面的 div 以获取 googlemap 显示。这是对我的 ajax 调用的响应

 <div id="googlemaps">

  </div>

上面的 div 包含我的谷歌地图。第一次打开 jquery ui 对话框地图加载成功，但第二次打开地图 div 为空白。

我的带有 jquery ui 对话框的 ajax 代码

 $("<div>This is  content</div>")
                                        .dialog({
                                            "title": "",
                                            "width": "auto",
                                            "height": "auto",
                                            "modal": true,

                                            //                "buttons": {"OK": function() {
                                            //                $(this).dialog("close");
                                            //                },
                                            //                "Refresh": function() {
                                            //                getContent($(preview_btn).attr('data-id'));
                                            //                },
                                            //                }
                                        }).dialogExtend({
"load": function (evt, dlg) {
                                                getContent($(preview_btn).attr('data-id'), c_page);
                                                //$('.ui-dialog').css('top', '95px');
                                                //$("html, body").animate({
                                                // scrollTop:0
                                                //},"fast");

                                                $('span').removeClass('ui-button-icon-primary ui-icon');
                                                //$('span').remove();
                                                $('.ui-button').css('top', '5px');
                                                //$('.ui-dialog-titlebar-close').append('<span class="test">&nbsp;&nbsp;&nbsp;&nbsp;</span>');
                                                //$('.ui-dialog-titlebar-close').append('<span class="ui-button-text">Close</span>');
                                                $('.ui-dialog-titlebar-close').append('<div style="margin-top: -12px;">X</div>');
                                                $('.ui-dialog').css('top', scrollY + 'px');
                                                $('.ui-button-text').css({"margin-top": "1px", "height": "0px"});

                                            },
       });



    function getContent(id, c_page) {
                                // console.log(id);
                                $.ajax({
                                    type: 'post',
                                    url: 'xxx.php',
                                    //url: 'preview_template.php',
                                    data: {id: id, c_page: c_page},
                                    success: function (data) {
                                        $('body').find('.ui-dialog-content').html(data);
                                        var full_size = $(window).width();
                                        var ui_size = $('.ui-dialog').width();
                                        // console.log(full_size);
                                        // console.log(ui_size);
                                        var ui_left = (parseFloat(full_size) - parseFloat(ui_size)) / 2;
                                        $('.ui-dialog').css('left', ui_left + 'px');
                                    }
                                })
                            }

【问题讨论】：

你可以为你的问题写小提琴吗？
我的代码很长，因此无法在小提琴上进行设置。你可以建议我你的答案，这样我就可以在我的机器上试一试。
结帐aspsnippets.com/Demos/1061 链接。你在使用这种类型的对话框吗？
@HareshKumar 是的，我使用与您给定链接相同的对话框。但我的对话框内容（地图）正在使用 ajax 获取。
你能在你的问题中添加你的 ajax 输出吗？

标签： jquery ajax google-maps jquery-ui-dialog

【解决方案1】：

我在工作 2 天后找到了答案。需要先将 ajax 内容加载到 jquery ui 对话框中。请为对话框保留 autoopen : false 并在内容加载到对话框后打开它。

然后触发 ui 对话框的 open 方法，以便对话框能够在 jquery ui 对话框中加载 ajax 加载内容中的谷歌地图。

【讨论】：