17370845950

本文介绍了如何使用 JavaScript 和 MapLibre GL JS (通过 maptilersdk) 在地图上创建可拖拽的标记，并利用浏览器的 localStorage API 来持久化这些标记的位置数据，以便在页面重新加载后仍能显示这些标记。

存储和加载地图标记

在 Web 应用程序中，动态创建并管理地图上的标记是很常见的需求。然而，默认情况下，这些标记数据在页面刷新后会丢失。为了解决这个问题，我们可以使用浏览器的 localStorage API 将标记的位置数据存储在本地，并在页面加载时重新加载这些数据。

使用 localStorage

localStorage 是一种 Web API，允许我们在用户的浏览器中存储键值对数据。这些数据在浏览器关闭后仍然存在，直到被显式删除或浏览器清除缓存。

存储标记数据:

1. 收集标记数据: 首先，我们需要收集所有标记的位置数据。可以将这些数据存储在一个数组中，每个元素代表一个标记的经纬度坐标。

2. 序列化数据: localStorage 只能存储字符串类型的数据。因此，我们需要将标记数据数组序列化为 JSON 字符串。可以使用 JSON.stringify() 方法来实现。

3. 存储到 localStorage: 使用 localStorage.setItem(key, value) 方法将序列化后的数据存储到 localStorage 中。key 是一个字符串，用于标识存储的数据，value 是要存储的 JSON 字符串。

示例代码:

function saveMarkersToLocalStorage(markers) {
  const markerData = markers.map(marker => {
    return marker.getLngLat();
  });
  const markerDataString = JSON.stringify(markerData);
  localStorage.setItem("mapMarkers", markerDataString);
}

加载标记数据:

1. 从 localStorage 获取数据: 使用 localStorage.getItem(key) 方法从 localStorage 中获取存储的 JSON 字符串。

2. 反序列化数据: 使用 JSON.parse() 方法将 JSON 字符串反序列化为 JavaScript 对象（在本例中是一个数组）。

3. 创建并添加标记: 遍历反序列化后的数组，为每个经纬度坐标创建一个新的标记，并将其添加到地图上。

示例代码:

function loadMarkersFromLocalStorage(map) {
  const markerDataString = localStorage.getItem("mapMarkers");
  if (markerDataString) {
    const markerData = JSON.parse(markerDataString);
    markerData.forEach(coords => {
      const marker = new maptilersdk.Marker({
        color: '#000',
        draggable: true,
      })
        .setLngLat([coords.lng, coords.lat])
        .addTo(map);
    });
  }
}

将代码集成到 MapLibre GL JS 应用程序中

将上述代码集成到你的 MapLibre GL JS 应用程序中，你需要：

1. 在地图初始化后，调用 loadMarkersFromLocalStorage(map) 函数来加载之前存储的标记。

2. 在创建新的标记时，或者在标记被拖动后，更新 localStorage 中的数据。可以创建一个全局的标记数组，每次修改标记时都更新这个数组，并调用 saveMarkersToLocalStorage(markers) 函数。

完整示例代码 (包含 maptilersdk):

maptilersdk.config.apiKey = 'YOUR_MAPTILER_API_KEY'; // 替换为你的 API 密钥

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

let markers = []; // 用于存储所有标记的数组

// 加载 localStorage 中的标记
function loadMarkersFromLocalStorage(map) {
  const markerDataString = localStorage.getItem("mapMarkers");
  if (markerDataString) {
    const markerData = JSON.parse(markerDataString);
    markerData.forEach(coords => {
      const marker = new maptilersdk.Marker({
        color: '#000',
        draggable: true,
      })
        .setLngLat([coords.lng, coords.lat])
        .addTo(map);
      markers.push(marker); // 将新标记添加到 markers 数组
    });
  }
}

// 保存标记到 localStorage
function saveMarkersToLocalStorage() {
  const markerData = markers.map(marker => {
    return marker.getLngLat();
  });
  const markerDataString = JSON.stringify(markerData);
  localStorage.setItem("mapMarkers", markerDataString);
}


map.on('load', () => {
  loadMarkersFromLocalStorage(map); // 在地图加载后加载标记

  map.on('click', function (e) {
    const marker = new maptilersdk.Marker({
      color: '#000',
      draggable: true,
    })
      .setLngLat([e.lngLat.lng, e.lngLat.lat])
      .addTo(map);

    markers.push(marker); // 将新标记添加到 markers 数组
    saveMarkersToLocalStorage(); // 保存标记到 localStorage

    marker.on('dragend', () => {
      saveMarkersToLocalStorage(); // 拖动结束后保存标记
    });
  });
});

注意事项:

• 确保替换 YOUR_MAPTILER_API_KEY 为你自己的 MapTiler API 密钥。
• 需要在 map.on('load', ...) 事件中加载 localStorage 中的标记，确保地图已经初始化完毕。
• 为了简化代码，示例中没有包含错误处理。在实际应用中，应该添加适当的错误处理机制，例如检查 localStorage 是否可用，以及 JSON.parse() 是否成功。
• localStorage 有存储容量限制（通常为 5MB 或 10MB）。如果需要存储大量数据，可以考虑使用 IndexedDB 或服务器端存储。
• 每次修改标记（创建、删除、拖动）后，都需要调用 saveMarkersToLocalStorage() 来更新 localStorage 中的数据。

总结

通过使用 localStorage API，我们可以轻松地在 MapLibre GL JS 应用程序中持久化地图标记数据。这使得用户在刷新页面后仍然可以访问他们之前创建的标记，从而提供更好的用户体验。虽然 localStorage 有一些限制，但在许多情况下，它是一个简单有效的解决方案。对于更复杂的需求，可以考虑使用其他存储方案。