刷新传单映射:映射容器已初始化

Question

我有一个页面,给用户选择,他可以切换我显示的传单地图.

在初始传单地图加载后,我的问题是当我想要刷新地图时.

我总是得到"地图容器已初始化":

问题在于:

var map = L.map('mapa').setView([lat, lon], 15);

最初它加载得很好,但是当我在表单中选择另一个参数并希望再次显示地图时它会崩溃.

顺便说一句,我试图$('#mapa')在第二次之前使用jQuery 销毁并重新创建,setView()但它显示了相同的错误.

Answer 1

试着map.remove();尝试重新加载地图前.这将使用Leaflet的库(而不是jquery)删除以前的map元素.

Answer 2

HTML:

<div id="weathermap"></div>

JavaScript的:

function buildMap(lat,lon)  {
    document.getElementById('weathermap').innerHTML = "<div id='map' style='width: 100%; height: 100%;'></div>";
    var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                    osmAttribution = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors,' +
                        ' <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
    osmLayer = new L.TileLayer(osmUrl, {maxZoom: 18, attribution: osmAttribution});
    var map = new L.Map('map');
    map.setView(new L.LatLng(lat,lon), 9 );
    map.addLayer(osmLayer);
    var validatorsLayer = new OsmJs.Weather.LeafletLayer({lang: 'en'});
    map.addLayer(validatorsLayer);
}

我用这个:

document.getElementById('weathermap').innerHTML = "<div id='map' style='width: 100%; height: 100%;'></div>";

重新加载渲染图的div的内容.

Answer 3

最好的方法

map.off();
map.remove();

您应该添加map.off(),它也可以更快地工作,并且不会导致事件出现问题

Answer 4

只用这个

map.invalidateSize();

https://github.com/Leaflet/Leaflet/issues/690

Answer 5

初始化地图之前，请检查地图是否已启动

var container = L.DomUtil.get('map');
      if(container != null){
        container._leaflet_id = null;
      }

Answer 6

您应该尝试卸载react js中的函数以删除现有的地图。

const Map = () => {

    const mapContainer = useRef();
    const [map, setMap] = useState({});

    useEffect(()=>{
        const map = L.map(mapContainer.current, {attributionControl: false}).setView([51.505, -0.09], 13);

    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
        maxZoom: 18,
        attribution: 'Map',
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1
    }).addTo(map);

    // unmount map function
    return () => map.remove();
    }, []);

    return (
        <div style={{padding: 0, margin: 0, width: "100%", height: "100vh",}}
             ref={el => mapContainer.current = el}>
        </div>
    );
}

Answer 7

好吧,经过多次寻求我意识到它在http://leafletjs.com/examples/layers-control.html上有详细记录

我结束了没有重新绘制地图,但打印一次并重新绘制每个新的ajax调用上的点,所以问题是如何清理旧点并仅打印新点.我结束了这样做:

var point = L.marker([new_marker[0], new_marker[1]]).addTo(map).bindPopup('blah blah');
points.push(point); 
//points is a temporary array where i store the points for removing them afterwards

所以,在每次新的ajax调用中,在绘制新点之前,我会执行以下操作:

for (i=0;i<points.length;i++) {
  map.removeLayer(points[i]);
}
points=[];

到现在为止还挺好 :-)

Answer 8

当你删除一个地图时,它会破坏div id引用,因此,在remove()之后,你需要再次构建将显示地图的div,以避免出现"Uncaught Error:Map container not found".

if(map != undefined || map != null){
    map.remove();
   $("#map").html("");
   $("#preMap").empty();
   $( "<div id=\"map\" style=\"height: 500px;\"></div>" ).appendTo("#preMap");
}

Answer 9

您可以尝试在初始化之前或离开页面时删除地图：

if(this.map) {
  this.map.remove();
}

Answer 10

在初始化地图之前检查地图是否已经启动

var container = L.DomUtil.get('map');

if(container != null){

container._leaflet_id = null;

}

map.invalidateSize();

这个对我有用