如何存储Maptiler SDK点击生成的标记点并在刷新后展示？

要解决页面刷新后标记点消失的问题，核心是把标记点的可序列化数据存在localStorage里（直接存Marker对象不行，它无法被序列化），同时用数组管理标记点数据，每次新增或修改标记点时同步更新存储。

修改后的完整代码： #

maptilersdk.config.apiKey = 'FeLE2yBSiMMi7tgevphq';
const map = new maptilersdk.Map({
  container: 'map',
  style: maptilersdk.MapStyle.STREETS,
  center: [30.5, 50.5],
  zoom: 14,
});

// 定义存储标记点数据的数组，从localStorage读取已有数据，没有则初始化空数组
let markersData = JSON.parse(localStorage.getItem('mapMarkers')) || [];

// 页面加载时，根据存储的数据创建标记点
function renderMarkers() {
  markersData.forEach(data => {
    const marker = new maptilersdk.Marker({
      color: data.color,
      draggable: data.draggable
    })
    .setLngLat(data.lngLat)
    .addTo(map);
    
    // 监听标记点拖拽结束事件，更新存储的位置
    marker.on('dragend', () => {
      const newLngLat = marker.getLngLat();
      // 找到对应的数据项并更新
      const index = markersData.findIndex(item => 
        item.lngLat.lng === data.lngLat.lng && item.lngLat.lat === data.lngLat.lat
      );
      if (index !== -1) {
        markersData[index].lngLat = [newLngLat.lng, newLngLat.lat];
        localStorage.setItem('mapMarkers', JSON.stringify(markersData));
      }
    });
  });
}

// 初始化渲染已有标记点
map.on('load', () => {
  renderMarkers();
});

// 点击地图创建新标记点
map.on('click', function (e) {
  const markerConfig = {
    color: '#000',
    draggable: true
  };
  const lngLat = [e.lngLat.lng, e.lngLat.lat];
  
  // 创建标记点并添加到地图
  const newMarker = new maptilersdk.Marker(markerConfig)
    .setLngLat(lngLat)
    .addTo(map);
  
  // 将新标记点的数据存入数组并同步到localStorage
  markersData.push({...markerConfig, lngLat});
  localStorage.setItem('mapMarkers', JSON.stringify(markersData));
  
  // 监听新标记点的拖拽结束事件，更新存储
  newMarker.on('dragend', () => {
    const newLngLat = newMarker.getLngLat();
    const index = markersData.findIndex(item => 
      item.lngLat.lng === lngLat[0] && item.lngLat.lat === lngLat[1]
    );
    if (index !== -1) {
      markersData[index].lngLat = [newLngLat.lng, newLngLat.lat];
      localStorage.setItem('mapMarkers', JSON.stringify(markersData));
    }
  });
});

// 如果需要初始标记点，直接往markersData里加数据即可
// 比如原代码的初始标记点：
// if (markersData.length === 0) {
//   markersData.push({
//     color: '#000',
//     draggable: true,
//     lngLat: [30.5, 50.5]
//   });
//   localStorage.setItem('mapMarkers', JSON.stringify(markersData));
// }

关键说明： #

• 数据存储：用localStorage存储标记点的配置和经纬度（都是可序列化的JSON数据），避免直接存Marker对象（无法序列化）
• 数组管理：用markersData数组统一管理所有标记点的数据，新增、修改后都同步到localStorage
• 拖拽更新：监听标记点的dragend事件，拖拽结束后更新对应数据项的经纬度并同步存储
• 页面加载渲染：地图加载完成后，读取localStorage的数据循环创建标记点

内容的提问来源于stack exchange，提问作者Артем Гунченко