代码之家  ›  专栏  ›  技术社区  ›  Valuator

在平移或移动之前,地图数据不会填充整个地图元素

  •  -2
  • Valuator  · 技术社区  · 7 年前

    我正在一个DevExtreme弹出窗口中显示一个谷歌地图(使用引导)。地图作为ASP的内容返回。NET核心视图组件。

    地图占据了整个div(谷歌徽标、控件等),但实际地图数据本身没有。它占据的区域较小,其他地方只有灰色:

    enter image description here

    现在,只要我对地图进行任何操作-轻轻平移、放大、缩小,地图就会占据整个元素:

    enter image description here

    以下是创建地图的ViewComponent内容:

    <script>
    var propertyMap = new google.maps.Map(document.getElementById('mapContainer'), {
        zoom: 10,
        center: { lat: 40.71, lng: -74.01 },
        mapTypeId: google.maps.MapTypeId.HYBRID
    });
    </script>
    
    <div id="mapContainer" style="width: 100%; height: 100%;"></div>
    

    以及检索ViewComponent并将内容放置在弹出窗口中的AJAX函数:

    var mapPopup = $("<div />").appendTo($("body")).dxPopup({
    width: 930,
    height: 650,
    visible: false,
    closeOnOutsideClick: true
    });
    
    function showMapPopup() {
    $.ajax({
        type: "POST",
        url: "/Maps/PropertyMap",
    }).done(function (data) {
        mapPopup.dxPopup({
            contentTemplate: data
        });
        mapPopup.dxPopup("instance").show();
        google.maps.event.trigger(propertyMap, 'resize');
    });
    }
    

    我尝试添加 google.maps.event.trigger(propertyMap, 'resize') 事件,但它没有帮助。

    2 回复  |  直到 7 年前
        1
  •  0
  •   MrUpsidown    7 年前

    在上触发贴图调整大小 shown 弹出窗口的事件。

    看见 Events Shown

    类似于:

    var popupOptions = {
    
        // [...] Other options here
    
        onShown: function() {
    
          google.maps.event.trigger(propertyMap, 'resize');
        }
    };
    

    并在创建弹出窗口实例时使用这些选项。

    根据您发布的代码,我认为这应该可行:

    var mapPopup = $("<div />").appendTo($("body")).dxPopup({
      width: 930,
      height: 650,
      visible: false,
      closeOnOutsideClick: true,
      onShown: function() {
        google.maps.event.trigger(propertyMap, 'resize');
      }
    });
    
        2
  •  0
  •   Valuator    7 年前

    我最终将地图创建包装在一个函数中:

    <script>
    function createMap() {
        var propertyMap = new google.maps.Map(document.getElementById('mapContainer'), {
            zoom: 10,
            center: { lat: 40.71, lng: -74.01 },
            mapTypeId: google.maps.MapTypeId.HYBRID
        });
    }
    </script>
    
    <div id="mapContainer" style="width: 100%; height: 100%;"></div>
    

    然后在显示模式之前不调用它:

    var mapPopup = $("<div />").appendTo($("body")).dxPopup({
        width: 930,
        height: 650,
        visible: false,
        closeOnOutsideClick: true,
        onShown: function() {
            createMap();
        }
    });
    

    模式打开和地图显示时会有一点延迟,因为直到那时它才被创建,但至少现在它填充了整个元素。