[英]Leaflet: map invalidatesize not working
I've been working on this all night: please don't tell me to go to google. 我整夜都在工作:请不要告诉我去Google。 I've read every duplicate question, all of the leaflet documentation that I can find, and just can't figure out why this isn't working.
我已经阅读了每个重复的问题,找到了所有的传单文档,但无法弄清楚为什么它不起作用。 I had to change over to the new Mapquest tiles and everything is working fine except that I'm only getting one corner of my tiles to load.
我不得不切换到新的Mapquest磁贴,并且一切正常,只是我的磁贴只有一个角要加载。 I know that the answer is map invalidate size.
我知道答案是地图无效尺寸。 That's what worked before and that's what every article and question/answer I've read tonight says is the answer.
这就是以前的工作方式,也是我今晚阅读的每篇文章和问题/答案所代表的答案。 I'm missing something obvious.
我缺少明显的东西。 Please help.
请帮忙。 Here's my script:
这是我的脚本:
<script>
$('#locModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var mapinfo = button.data('whatever');
var pos = mapinfo.position;
var lat = pos.substring(0,7);
var ling = pos.substring (10,17);
var map = L.map('mapdiv').setView([lat, ling], 6)
var name = mapinfo.name;
var contact = mapinfo.contact;
var address = mapinfo.address;
var city = mapinfo.city;
var state = mapinfo.state;
var zip = mapinfo.zip;
var phone = mapinfo.phone;
var p1 = phone.substring(0,3);
var p2 = phone.substring(3,6);
var p3 = phone.substring(6,10);
if (map != undefined) { map.remove(); }
window.setTimeout(function() {
map.invalidateSize();
}, 1000);
var basemap = L.map('mapdiv', {
layers: MQ.mapLayer(),
center: [ lat, ling ],
zoom: 12,
});
L.marker([lat, ling]).addTo(map);
$("#mapModalHeader").html("<button type='button' class='close' data-dismiss='modal' aria-hidden='true'>X</button><h2>" + "Map to " + name + "</h2>");
$("#mapModalFooter").html("Mailing Address: " + contact + " " + address + " " + city + ", " + state + " " + zip
+ " " + "(" + p1 + ") " + p2 + "-" + p3 );
$('body').on('hidden.bs.modal', '.modal', function () {
document.location.reload();
});
});
</script>
I've also tried the map invalidatesize like this: 我也尝试过这样的地图invalidatesize:
(function() {
map.invalidateSize();
}, 1000);
A key function on my live website is broken and I could please use any help you can give me. 我的实时网站上的一个关键功能已损坏,请使用您能给我的任何帮助。
It is really confusing what you try to achieve… 您尝试实现的目标确实令人困惑……
First you initiate your map with var map = L.map('mapdiv').setView([lat, ling], 6)
, then you destroy it with map.remove()
, then you try to update its size after a 1 second timeout, and finally you initialize your map again but keep the reference in a different variable with var basemap = L.map('mapdiv'
首先使用
var map = L.map('mapdiv').setView([lat, ling], 6)
初始化地图,然后使用map.remove()
销毁它,然后尝试在1之后更新其大小第二次超时,最后再次初始化地图,但将引用保留在另一个变量中,变量为var basemap = L.map('mapdiv'
So the first mistake is probably this strange succession of instructions. 因此,第一个错误可能是指令的奇怪继承。
Then, you could simplify your code: 然后,您可以简化代码:
div
map container ( #mapdiv
in your case) is created as an HTML Element. div
映射容器(在本例中为#mapdiv
)创建为HTML元素,就可以初始化地图。 No need for it to be shown or even to be attached to the DOM. invalidateSize()
as soon as the map container size has changed. invalidateSize()
。 In your case, directly within the callback of "shown.bs.modal"
event (note the difference with the event you have used: "shown"
vs "show"
). "shown.bs.modal"
事件的回调内(请注意与您使用的事件的区别: "shown"
与"show"
)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.