Javascript 单张:更新地图

Javascript 单张:更新地图,javascript,leaflet,Javascript,Leaflet,以下是我在网站上绘制传单地图的功能: function drawTweetMap(points) { if (tweetMap != null) tweetMap.remove(); var london = [51.505, -0.09]; tweetMap = L.map('tweetMap').setView(london, 5); var cloudmadeUrl = 'http://{s}.mqcdn.com/tiles/1.0.

以下是我在网站上绘制传单地图的功能:

function drawTweetMap(points) {
    if (tweetMap != null)
        tweetMap.remove();  

    var london = [51.505, -0.09];
    tweetMap = L.map('tweetMap').setView(london, 5);

    var cloudmadeUrl = 'http://{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.jpg';
    var subDomains = ['otile1','otile2','otile3','otile4'];
    var cloudmadeAttrib = 'Data, imagery and map information provided by <a href="http://open.mapquest.co.uk" target="_blank">MapQuest</a>, <a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> and contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/" target="_blank">CC-BY-SA</a>';
    L.tileLayer(cloudmadeUrl, 
                  {attribution: cloudmadeAttrib, 
                   maxZoom: 18,
                   subdomains: subDomains})
    .addTo(tweetMap);

    var markers = L.markerClusterGroup();
    var points_rand = L.geoJson(points, {onEachFeature: onEachFeature});
    markers.addLayer(points_rand);
    tweetMap.addLayer(markers);
    tweetMap.fitBounds(markers.getBounds());
}
在该功能中:

function retrieveCurrentTweetPositions() {
    var points = retrieveCurrentPositions();
    var mapInput = translatePointsInMapFormat(points);
    drawTweetMap(mapInput);
}
function updateTweetMapPosition() { 
    setTimeout(function(){
        tweetMap.invalidateSize(true);}
    ,500)
}
不幸的是,如果以这种方式绘制地图,结果如下:

在其他问题中,我发现可以使映射的大小无效以解决此问题,因此建议在启动时调用此函数:

function retrieveCurrentTweetPositions() {
    var points = retrieveCurrentPositions();
    var mapInput = translatePointsInMapFormat(points);
    drawTweetMap(mapInput);
}
function updateTweetMapPosition() { 
    setTimeout(function(){
        tweetMap.invalidateSize(true);}
    ,500)
}
我这样做了,这解决了第一次绘制地图时的问题。但是,当我第二次尝试重新绘制地图时,结果如下:

有没有人遇到过这个问题?如何在完全加载地图内容的情况下重新绘制地图

谢谢


编辑


下面是JSFIDLE:

看看这个方法

我解决了这个问题如下

setTimeout(函数(){map.invalidateSize(true);},500)

使用


你在哪里调用了
tweetMap.redraw()?我尝试用
if(tweetMap!=null){tweetMap.eachLayer(function(layer){layer.redraw();});}
替换前两行,但它说方法未定义
redraw()
需要在
tweetMap
上调用。情况也是这样。它说它是未定义的:
TypeError:“未定义”不是一个函数(计算“tweetMap.redraw()”)
你在哪里调用它?带有完整代码的JSFIDLE将非常有用:)