0

按照我的标准,我做得很好!除了函数等基础知识之外,我对 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();

注册“点击”的 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) 行在这里没有任何解决方案有帮助。我是否必须重新初始化地图或其他东西。感谢您的建议。

4

1 回答 1

0

当您调用模式打开时,请使用 Eric Martin 描述的 onOpen 函数。通过使用他的 onOpen 函数,您将能够使用回调功能,从而使用谷歌地图事件侦听器来侦听调整大小事件。听到调整大小事件后,您可以重新初始化您的谷歌地图,从而消除灰色区域

    $("#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");   
       }
    });
于 2013-06-03T18:01:22.123 回答