Question

我在jQuery UI对话框中嵌入了谷歌地图。

它按预期工作，但只有一次，直到刷新页面。

以下是发生的事情：

用户点击链接，弹出窗口并加载地图（Pavlodar！）
用户关闭弹出窗口
用户再次点击该链接：弹出窗口打开，显示＆＃34; Google＆＃34;在左下角，但地图区域仍为空。
用户刷新页面，一切都是恢复正常。

这是我的功能：

    $(document).ready(function () {

    //avoid conflict with bootstrap css tooltips
    var bootstrapButton = $.fn.button.noConflict();
    $.fn.bootstrapBtn = bootstrapButton;

    //button click event handler
    $("#popMap").click(function (ev) {

        //create map to draw address location
        var pavlodar = {lat: 52.3200561, lng: 76.9082336};
        var map = new google.maps.Map(document.getElementById('mapcanvas'), {
            zoom: 18,
            center: pavlodar,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        //establish ideal sizes
        var w = screen.width;
        var h = screen.height;
        if(w > h ){
            var dw = w * 0.5;
            var dh = h * 0.5;
        } else {
            var dw = w * 0.8;
            var dh = h * 0.6;
        }

        // create the map point
        var marker = new google.maps.Marker({ map: map, position: pavlodar });

        //calling the dialog
        $("#mapcanvas").dialog({ title: "наше место нахождения", maxWidth: dw, maxHeight: dh, height: dh, width: dw, modal: false, position: { my: "center", at: "center", of: window }});

        //stop the browser interpreting the click
        ev.preventDefault();
        ev.stopPropagation();

    });
});

我想知道这不仅仅是谷歌的一些限制，还是我的代码有问题。

知道问题可能是什么？

Answer 1

由于您使用相同的div进行地图和对话。对话框调用可能会干扰地图尝试在对话框出现后初始化地图

$(function() {
  function initializeDlgMap() {
    var mapProp = {
      center:new google.maps.LatLng(51.508742,-0.120850),
      zoom:5,
      mapTypeId:google.maps.MapTypeId.ROADMAP
    };
    var map=new google.maps.Map(document.getElementById("mapcanvas"),mapProp);
  }

    //establish ideal sizes
    var w = screen.width;
    var h = screen.height;
    if(w > h ){
        var dw = w * 0.5;
        var dh = h * 0.5;
    } else {
        var dw = w * 0.8;
        var dh = h * 0.6;
    }

  dialog = $("#mapcanvas" ).dialog({ title: "наше место нахождения", maxWidth: dw, maxHeight: dh, height: dh, width: dw, modal: false, position: { my: "center", at: "center", of: window },
    open: function() {
      initializeDlgMap();
    }
  });

  $( "#popMap").click(function() {
    dialog.dialog( "open" );
  });
});

使用谷歌地图的jQuery UI对话框只能运行一次

1 个答案: