javascript-在传单中加载地图非常慢

2019-10-26 06:42:56 阅读：225 来源： 互联网

我在传单中有一张地图,使用以下代码,当页面加载时,该地图没有完全显示出来,我不知道为什么,如何解决？

var Mmap = L.map('Modalmap').setView([8.7144, 125.7481],8);
L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright"></a>',
    subdomains: ['a','b','c']
}).addTo(Mmap);

L.control.scale({imperial:false}).addTo(Mmap);

var north = L.control({position: "topleft"});
north.onAdd = function(map) {
    var div = L.DomUtil.create("div", "info_legend leaflet-bar");
    div.innerHTML = '<img src="../lib/css/images/north-arrow-2.png" width="100%" height="100%">';
    return div;
}
north.addTo(Mmap);

var geocoder = L.Control.geocoder({
    defaultMarkGeocode: false
})
.on('markgeocode', function(e) {
    var box = e.geocode.center;
    document.getElementById("Latitude").value = box.lat;
    document.getElementById("Longitude").value = box.lng;
    var MarkLayer=L.marker([box.lat,box.lng]).addTo(Mmap);
    var group = new L.featureGroup([MarkLayer]);

    Mmap.fitBounds(group.getBounds());
}).addTo(Mmap);

这张地图处于模态,我从导航栏将其称为Modal-1

<div class="collapse navbar-collapse" id="myNavbar">
    <ul class="nav navbar-nav" style="margin-top: -3px;">
        <li class="dropdown"><a href="#" data-toggle="modal" data-target="#modal-1">New Customer</a></li>
        <li class="dropdown"><a href="#" data-toggle="modal" data-target="#modal-2">New Category</a></li>
    </ul>
</div>

解决方法:

这里有些猜测：我看到您的容器的名称是“ Modalmap”.这使我认为您是在模式容器中显示地图.

我还猜测当模态出现时,“ Modalmap”(它是传单的容器)的高度和宽度是动态设置的.也许这给您的传单地图带来了一些问题,因为传单在初始化时会根据其父级宽度和高度来计算其宽度和高度.当模态不显示时,可能会发生这种情况,并且模态的宽度和高度可能较小,而这些较小的值最终就是传单的宽度和高度.

在显示模态并且模态具有正确的高度和宽度后,您可以尝试要求传单地图“刷新”其大小.

尝试此操作,在触发模态的那一行显示之后：

setTimeout(function(){ map.invalidateSize()}, 500);

这将迫使传单在500毫秒后重新计算其大小. (我想500ms足以显示您的模态).如果不起作用,请尝试更大的值.

更新：
对于bootstrap 3,只需将其放置在您的代码中

$('body').on('shown.bs.modal', function (e) {
    setTimeout(function(){ map.invalidateSize()}, 500);
})

提示：我建议您不要将body用作jquery的选择器,因为这将触发所有模态的代码.使用标记中包含的更具体的选择器
更多信息在这里Calling a function on bootstrap modal open

标签：leaflet,openstreetmap,javascript
来源： https://codeday.me/bug/20191026/1934839.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-在传单中加载地图非常慢