Question

按照我的标准，我做得很好！除了函数等基础之外，我对JS几乎没有任何知识。我已经使用这些页面汇总了一个使用SimpleModal框架将Google Maps加载到Modal的工作脚本。令我感到宽慰的是，我得到了它的工作，但它有一个我无法改变的最终错误。在第一次单击HREF时加载模态，但是如果我关闭模态然后尝试重新打开它，则会加载模态，其中部分地图缺失。丢失的地图问题是我认为我已经解决的问题。我的JS是

            var map;
        var src = 'https://sites.google.com/site/bristol2monaco/kml/route2.kml';
        function initialize() {
        var myLatlng = new google.maps.LatLng(51.337890,-0.813049);
        map = new google.maps.Map(document.getElementById("basic-modal-content"), {
        center: myLatlng,
        zoom: 7,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
        loadKmlLayer(src, map);
  }

        function loadKmlLayer(src, map) {
        var kmlLayer = new google.maps.KmlLayer(src, {
        suppressInfoWindows: true,
        clickable: false,
        preserveViewport: true,
        map: map
      });
    } 
  initialize();

和注册'click'的js文件包含：

jQuery(function ($) {
// Load dialog on page load
//$('#basic-modal-content').modal();

// Load dialog on click
$('#table .newbasic').click(function (e) {
    $('#basic-modal-content').modal();
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize"); 
    map.setCenter(center);
    return false;
});
});

正如我以为我已经解决了丢失的地图错误（使用此处发布的解决方案）和上面的（map，resize）行，这里的解决方案都没有帮助。我是否必须重新初始化地图或其他东西。感谢你的建议。

Answer 1

当你打开模态打开时，使用Eric Martin描述的onOpen函数。使用他的onOpen功能，您将能够使用回调功能，因此使用谷歌地图事件监听器来监听调整大小事件。听到调整大小事件后，您可以重新初始化Google地图，从而删除灰色区域

    $("#table .newbasic").modal({
       onOpen: function (dialog) {
          google.maps.event.addListenerOnce(map, 'resize', function() {
             //Alert TESTING IF RESIZE is heard(remove after test)
             alert("heard resize onOpen");
             initialize();                  
             map.setCenter(center);
          });
          google.maps.event.trigger(map, "resize");   
       }
    });

Simplemodal Google Map只显示一次，但不会显示在第二次点击上

1 个答案: