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

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

初次加载传单地图后，我的问题是何时要刷新地图

我总是得到“映射容器已初始化”：

问题是：

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

最初它加载良好，但当我在表单中选择另一个参数并希望在另一次崩溃时显示贴图时

---

顺便说一句，我尝试在第二个

setView（）

之前用jQuery销毁并重新创建

$（'#mapa'）

，但它显示了相同的错误。

尝试

map.remove（）在尝试重新加载地图之前。这将使用传单的库（而不是jquery库）删除以前的地图元素。
经过多次查找，我意识到它在

我没有重新绘制地图，而是在每次新的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=[];

for（i=0；iHtml:

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

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);
}



JavaScript:

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

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);
}

功能构建图（lat、lon）{
document.getElementById（'weathermap'）.innerHTML=“”；
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'，
OSMattAttribute='地图数据©贡献者，'+
' ',
osmLayer=newl.tillelayer（osmUrl，{maxZoom:18，attribute:osmAttribution}）；
var map=新的L.map（'map'）；
地图设置视图（新L.LatLng（lat，lon），9）；
map.addLayer（osmLayer）；
var validatorsLayer=新的OsmJs.Weather.layer（{lang:'en'}）；
map.addLayer（validatorsLayer）；
}

我用这个：

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

document.getElementById（'weathermap'）.innerHTML=“”；

重新加载div的内容，其中呈现映射。
我也遇到了同样的问题。然后我设置了全局映射变量，例如var map=null，然后检查显示映射

if(map==null)then map=new L.Map('idopenstreet').setView();

使用此解决方案，您的映射将仅在第一次初始化时使用L填充。映射将不会为空。因此不会出现像映射容器已初始化那样的错误。
最佳方法

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

您应该添加map.off（），它也可以更快地工作，并且不会导致事件问题。
当您刚刚删除一个映射时，它会破坏div id引用，因此，在remove（）之后，您需要再次构建将显示映射的div，以避免“未捕获错误：未找到映射容器”

if（map！=undefined | | map！=null）{
map.remove（）；
$（“#map”）.html（“”）；
$（“#preMap”）.empty（）；
$（“”）。附件（“#preMap”）；
}
使用redrawAll（）函数而不是renderAll（）。
在初始化映射之前，检查映射是否已启动

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

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

if(container != null){

container._leaflet_id = null;

}

切换页面时，我在angular上也遇到了同样的问题。我必须在离开页面之前添加此代码，以使其正常工作：

    $scope.$on('$locationChangeStart', function( event ) {
    if(map != undefined)
    {
      map.remove();
      map = undefined
      document.getElementById('mapLayer').innerHTML = "";
    }
});

没有
文档。getElementById（'mapLayer'）。innerHTML=“
地图不会显示在下一页上。
仅使用此选项

map.invalidateSize();

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

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

在初始化映射之前，请检查映射是否已启动

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

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

if(container != null){

container._leaflet_id = null;

}

这对我很有效
我们今天面对这个问题，我们解决了它。我们该怎么办

传单地图加载分区位于下方

<div id="map_container">
   <div id="listing_map" class="right_listing"></div>
</div>



当表单输入更改或提交时，我们遵循以下步骤。在我的页面中删除传单地图容器后，再次创建新的

$( '#map_container' ).html( ' ' ).append( '<div id="listing_map" class="right_listing"></div>' );

$（'map#u container'）.html（''）.append（''）；

在这段代码之后，我的传单地图可以很好地使用表单过滤器重新加载

谢谢。
如果您想要更新地图视图，例如更改地图中心，您不必删除然后重新创建地图，您只需更新坐标即可

const mapInit = () => {
 let map.current = w.L.map('map');

 L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright" target="_blank">OpenStreetMap</a> contributors'
 }).addTo(map.current);
}

const setCoordinate = (gps_lat, gps_long) => {
  map.setView([gps_lat, gps_long], 13);
}

initMap();

setCoordinate(50.403723 30.623538);

setTimeout(() => {
  setCoordinate(51.505, -0.09);
}, 3000);

const-mapInit=（）=>{
设map.current=w.L.map（'map'）；
L.tileLayer（'http://{s}.tile.osm.org/{z}/{x}/{y}.png'{
属性：“©；贡献者”
}).addTo（映射当前值）；
}
常量设置坐标=（gps\u横向、gps\u纵向）=>{
地图设置视图（[gps_-lat，gps_-long]，13）；
}
initMap（）；
设置坐标（50.403723 30.623538）；
设置超时（（）=>{
设定坐标（51.505，-0.09）；
}, 3000);
如果不全局存储地图对象引用，我建议

if (L.DomUtil.get('map-canvas') !== undefined) { 
   L.DomUtil.get('map-canvas')._leaflet_id = null; 
}


其中，
是绘制地图的对象

通过这种方式，您可以避免重新创建html元素，如果要
删除（）
它，就会发生这种情况。
要刷新传单地图，可以使用以下代码：

this.map.fitBounds（this.map.getBounds（））；
要在同一页面中刷新地图，可以使用下面的代码在页面上创建地图

if (!map) {
    this.map = new L.map("mapDiv", {
        center: [24.7136, 46.6753],
        zoom: 5,
        renderer: L.canvas(),
        attributionControl: true,
    });
}

然后使用“线下”刷新地图，但请确保使用相同的纬度、经度和缩放选项

map.setView([24.7136, 46.6753], 5);  

另外，我在使用angular 2+在同一页面的选项卡之间切换时也遇到了同样的问题，我可以通过在Component
constructor

var container = L.DomUtil.get('mapDiv');
if (container != null) {
    container.outerHTML = ""; // Clear map generated HTML
    // container._leaflet_id = null; << didn't work for me
}

var container=L.DomUtil.get（'mapDiv'）；
if（容器！=null）{
container.outerHTML=“；//清除映射生成的HTML
//容器。\传单\u id=null；您应该尝试卸载该函数以删除现有映射

const Map=（）=>{
const mapContainer=useRef（）；
const[map，setMap]=useState（{}）；
useffect（（）=>{
const map=L.map（mapContainer.current，{attributecontrol:false}）.setView（[51.505，-0.09]，13）；
L.tileLayer（'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}？访问令牌=pk.eyj1ijoibwwwwym94iiwiysi6imnpejy4nxvycta2emycxbndhrqcmz3n3gifq.rjcfig214ariislb6b5aw'{
maxZoom:18，
属性：“地图”，
id:“地图盒/街道-v11”，
tileSize:512，
Zoomofset:-1
}).addTo（地图）；
//卸载映射函数
return（）=>map.remove（）；
}, []);
返回(
mapContainer.current=el}>