使用 LocalStorage 持久化地图标记点：实现页面刷新后数据保留

技术教程
2025-10-26 11:49:41

使用 localstorage 持久化地图标记点：实现页面刷新后数据保留

本文将介绍如何使用 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 字符串转换为 J*aScript 数组
  markers = JSON.parse(markers);

  // 添加新的标记点数据
  markers.push({ lng: lng, lat: lat });

  // 将 J*aScript 数组转换为 JSON 字符串，并存储到 LocalStorage
  localStorage.setItem("markers", JSON.stringify(markers));
}
```
在上面的代码中，addMarkerToLocalStorage 函数接收经度和纬度作为参数，并将其存储到 LocalStorage 中。首先，它从 LocalStorage 中检索现有的 "markers" 数据。如果不存在，它会创建一个空数组。然后，它将新的经纬度添加到数组中，并将更新后的数组作为 JSON 字符串存储回 LocalStorage。

加载标记点数据

Spirit Me

SpiritMe允许用户使用数字化身制作视频，这些化身可以模拟用户的声音和情感

178 查看详情

在页面加载时，我们需要从 LocalStorage 中读取标记点数据，并在地图上重新创建这些标记点。

function loadMarkersFromLocalStorage(map) {
  // 从 LocalStorage 中获取标记点数据
  let markers = localStorage.getItem("markers");

  // 如果 LocalStorage 中没有数据，则直接返回
  if (!markers) {
    return;
  }

  // 将 JSON 字符串转换为 J*aScript 数组
  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 字符串解析为 J*aScript 数组，并遍历数组中的每个标记点数据，以在地图上创建相应的标记点。

集成到地图应用

将上述两个函数集成到你的地图应用中。在地图初始化后调用 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);
});

注意事项