Leaflet报错map container is already initialized 调用API坐标渲染地图失败如何解决

错误原因 #

• 你在遍历接口返回的坐标数组时，每次循环都会调用L.map('map')初始化id为map的DOM容器，Leaflet不允许同一个DOM节点重复初始化地图实例，因此第一次循环执行成功后，后续循环都会抛出该错误
• tileLayer（地图底图）也不需要重复添加，全局只需初始化一次即可

修正后的代码 #

// 全局只初始化一次地图实例，可先设置默认初始坐标
const mymap = L.map('map').setView([0, 0], 13);
// 全局只添加一次底图
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(mymap);

// 存储已添加的标记，方便后续更新时清空
let markers = [];

const fetchPosts = async () => {
  fetch("https://itk-exam-api.herokuapp.com/api/offices")
    .then((response) => response.json())
    .then((posts) => {
      console.log(posts);
      return getPosition(posts);
    });
};

const getPosition = (posts) => {
  // 先清空之前添加的所有标记，避免重复渲染
  markers.forEach(marker => mymap.removeLayer(marker));
  markers = [];

  posts.forEach((post) => {
    const latitude = post.latitude;
    const longitude = post.longitude;
    const coords = [latitude, longitude];
    console.log(coords);

    // 循环内仅需添加标记
    const newMarker = L.marker(coords).addTo(mymap)
      .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
      .openPopup();
    markers.push(newMarker);
  });

  // 可选：将地图视角自动调整到包含所有标记的范围
  if(markers.length) {
    const group = new L.featureGroup(markers);
    mymap.fitBounds(group.getBounds());
  }
}

fetchPosts();

额外注意点 #

• 后续需要重新拉取接口刷新坐标时，不需要重新初始化地图，直接调用fetchPosts方法即可，代码内置了旧标记清空逻辑
• 如果有切换地图容器的需求，可以在重新初始化前调用mymap.remove()销毁之前的地图实例，再创建新实例即可

内容的提问来源于stack exchange，提问作者redhead