本文将介绍如何使用 LocalStorage API 在 Web 地图应用中持久化用户添加的标记点。通过将标记点坐标存储在 LocalStorage 中，即使页面刷新，也能恢复之前的标记点，从而提升用户体验。我们将提供示例代码，并详细讲解如何实现数据的存储和读取。
在 Web 地图应用中，用户往往需要在地图上添加标记点，以便后续查看或进行其他操作。然而，默认情况下，页面刷新会导致所有数据丢失，包括这些标记点。为了解决这个问题，我们可以使用浏览器的 LocalStorage API 将标记点的数据存储在本地，并在页面加载时重新加载这些数据。
LocalStorage 简介
LocalStorage 是 HTML5 提供的一种在客户端存储数据的机制。它允许 Web 应用在用户的浏览器中存储键值对，这些数据在浏览器关闭后仍然存在，除非用户手动清除或代码删除。
实现步骤
-
存储标记点数据
当用户点击地图添加新的标记点时，我们需要将该标记点的经纬度信息存储到 LocalStorage 中。为了方便管理，我们可以将所有标记点的信息存储在一个数组中，然后将这个数组转换为 JSON 字符串存储到 LocalStorage。
function addMarkerToLocalStorage(lng, lat) { // 从 LocalStorage 中获取现有的标记点数据 let markers = localStorage.getItem("markers"); // 如果 LocalStorage 中没有数据，则创建一个空数组 if (!markers) { markers = "[]"; } // 将 JSON 字符串转换为 JavaScript 数组 markers = JSON.parse(markers); // 添加新的标记点数据 markers.push({ lng: lng, lat: lat }); // 将 JavaScript 数组转换为 JSON 字符串，并存储到 LocalStorage localStorage.setItem("markers", JSON.stringify(markers)); }在上面的代码中，addMarkerToLocalStorage 函数接收经度和纬度作为参数，并将其存储到 LocalStorage 中。 首先，它从 LocalStorage 中检索现有的 "markers" 数据。 如果不存在，它会创建一个空数组。 然后，它将新的经纬度添加到数组中，并将更新后的数组作为 JSON 字符串存储回 LocalStorage。
-
加载标记点数据
在页面加载时，我们需要从 LocalStorage 中读取标记点数据，并在地图上重新创建这些标记点。
function loadMarkersFromLocalStorage(map) { // 从 LocalStorage 中获取标记点数据 let markers = localStorage.getItem("markers"); // 如果 LocalStorage 中没有数据，则直接返回 if (!markers) { return; } // 将 JSON 字符串转换为 JavaScript 数组 markers = JSON.parse(markers); // 遍历数组，并在地图上创建标记点 markers.forEach((markerData) => { const marker = new maptilersdk.Marker({ color: '#000', draggable: true, }) .setLngLat([markerData.lng, markerData.lat]) .addTo(map); }); }loadMarkersFromLocalStorage 函数从 LocalStorage 中检索 "markers" 数据。 如果存在，它会将 JSON 字符串解析为 JavaScript 数组，并遍历数组中的每个标记点数据，以在地图上创建相应的标记点。
-
集成到地图应用
将上述两个函数集成到你的地图应用中。在地图初始化后调用 loadMarkersFromLocalStorage 函数，在用户点击地图添加标记点时调用 addMarkerToLocalStorage 函数。
maptilersdk.config.apiKey = 'YOUR_MAPTILER_API_KEY'; // 替换为你的 MapTiler API 密钥 const map = new maptilersdk.Map({ container: 'map', style: maptilersdk.MapStyle.STREETS, center: [30.5, 50.5], zoom: 14, }); // 加载 LocalStorage 中的标记点 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); // 将新的标记点数据存储到 LocalStorage addMarkerToLocalStorage(e.lngLat.lng, e.lngLat.lat); });
注意事项
- LocalStorage 存储的数据是字符串类型的，因此需要使用 JSON.stringify 和 JSON.parse 进行数据类型的转换。
- LocalStorage 存储容量有限，通常为 5MB 或 10MB，因此不适合存储大量数据。
- LocalStorage 存储的数据是明文存储的，因此不适合存储敏感信息。
- YOUR_MAPTILER_API_KEY 需要替换成你自己的 MapTiler API Key。
总结
通过使用 LocalStorage API，我们可以轻松地实现 Web 地图应用中标记点的持久化存储，从而提升用户体验。 本教程提供了一个简单的示例，展示了如何存储和加载标记点数据。 根据你的具体需求，你可以扩展此方法以存储其他类型的数据或实现更复杂的功能。
