Question

下面是调用onclick事件的函数

function drawMapFromWms(latt,longt){    

  document.getElementById('hrymap').innerHTML = "";      

     document.getElementById('hrymap').innerHTML = "<div id='map'></div>";
      map = L.map('map').setView([29.0,76.776695], 8);   


                 L.tileLayer.wms("http://example.com", {
             layers:'india3',

       format: 'image/png',
        transparent: true,
       attribution:"dummy"

    }).addTo(map);

          L.tileLayer.wms("http://example.com", {
             layers:'hrcm_roads',

       format: 'image/png',
        transparent: true,
       attribution:"dummy"

    }).addTo(map);

     var marker = L.marker([latt,longt]).addTo(map);

     $("#detail_content").css({'display':'block'});


  }

这是地图div创建的模式div

<div id="detail_content" class="w3-modal">
    <div class="w3-modal-content">
      <div class="w3-container">
        <span onclick="document.getElementById('detail_content').style.display='none'" class="w3-button w3-display-topright">&times;</span>
        <div class="modal-info">
          <div id="hrymap">
    </div>
        </div>
      </div>
    </div>
  </div>
</div>

最后一个函数是调用

问题是当我单击按钮时，地图部分加载，如下图所示

，并在检查元素之后将完全加载，如下图所示。

Answer 1

您没有正确初始化地图。您永远不会设定中心。传递地图选项参数作为第二个参数。应该是这样的：

df %>% 
dplyr::group_by(a) %>% 
dplyr::last(2)

这里是docs。

在阅读您的评论后，我相信这是因为与HTML a b 1 343 1 54 2 55 2 62 3 59 3 -9 4 0 4 -0.5属性关联的CSS会覆盖您不太具体的CSS。就个人而言，我只会使用更具体的CSS，例如：

var map = L.map('map', {center:[29.0, 76.776695], zoom:8});

代替

class

顺便

div.modal-info>div#hrymap>div#map.leaflet-container{
  width:868px; height:650px;
}

和

#map{
  width:868px; height:650px;
}

都是作业。为什么要第一个？为什么不document.getElementById('hrymap').innerHTML = "";呢？使用jQuery时，只需使用它即可。

如果CSS方法无效，请尝试：

document.getElementById('hrymap').innerHTML = "<div id='map'></div>";

请记住，使用$('#hrymap').html("<div id='map'></div>")时，遵循jQuery方法将影响$("<div id='map'></div>").appendTo('#hrymap').css({width:'868px', height:'650px'});之前的jQuery选择器，而遵循.appendTo()的jQuery方法将影响.appendTo()。 / p>

当然，同样，您应该尽可能多地创建HTML结构，而不使用JavaScript。仅在需要时动态地进行操作。

Answer 2

由于它是即时创建的，因此您的地图可能不知道其容器的大小。

尝试

map.invalidateSize();

Answer 3

setTimeout（function（）{map.invalidateSize（true）}，300）;

当我打开检查元素时，传单地图未完全加载

3 个答案: