本文介绍了如何使用 JavaScript 和 MapLibre GL JS (通过 maptilersdk) 在地图上创建可拖拽的标记，并利用浏览器的 localStorage API 来持久化这些标记的位置数据，以便在页面重新加载后仍能显示这些标记。
存储和加载地图标记
在 Web 应用程序中，动态创建并管理地图上的标记是很常见的需求。然而，默认情况下，这些标记数据在页面刷新后会丢失。为了解决这个问题，我们可以使用浏览器的 localStorage API 将标记的位置数据存储在本地，并在页面加载时重新加载这些数据。
使用 localStorage
localStorage 是一种 Web API，允许我们在用户的浏览器中存储键值对数据。这些数据在浏览器关闭后仍然存在，直到被显式删除或浏览器清除缓存。
存储标记数据:
收集标记数据: 首先，我们需要收集所有标记的位置数据。可以将这些数据存储在一个数组中，每个元素代表一个标记的经纬度坐标。
序列化数据: localStorage 只能存储字符串类型的数据。因此，我们需要将标记数据数组序列化为 JSON 字符串。可以使用 JSON.stringify() 方法来实现。
存储到 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);
}加载标记数据:
从 localStorage 获取数据: 使用 localStorage.getItem(key) 方法从 localStorage 中获取存储的 JSON 字符串。
网趣网上购物系统HTML静态版下载网趣购物系统静态版支持网站一键静态生成，采用动态进度条模式生成静态，生成过程更加清晰明确，商品管理上增加淘宝数据包导入功能，与淘宝数据同步更新!采用领先的AJAX+XML相融技术，速度更快更高效！系统进行了大量的实用性更新，如优化核心算法、增加商品图片批量上传、谷歌地图浏览插入等，静态版独特的生成算法技术使静态生成过程可随意掌控，从而可以大大减轻服务器的负担，结合多种强大的SEO优化方式于一体，使
反序列化数据: 使用 JSON.parse() 方法将 JSON 字符串反序列化为 JavaScript 对象（在本例中是一个数组）。
创建并添加标记: 遍历反序列化后的数组，为每个经纬度坐标创建一个新的标记，并将其添加到地图上。
示例代码:
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 应用程序中，你需要：
在地图初始化后，调用 loadMarkersFromLocalStorage(map) 函数来加载之前存储的标记。
在创建新的标记时，或者在标记被拖动后，更新 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 有一些限制，但在许多情况下，它是一个简单有效的解决方案。对于更复杂的需求，可以考虑使用其他存储方案。
