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

发布时间：2025-10-26

点击量：

使用 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。

加载标记点数据

小爱开放平台

小米旗下小爱开放平台

291

查看详情

在页面加载时，我们需要从 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);
});

注意事项

LocalStorage 存储的数据是字符串类型的，因此需要使用 JSON.stringify 和 JSON.parse 进行数据类型的转换。
LocalStorage 存储容量有限，通常为 5MB 或 10MB，因此不适合存储大量数据。
LocalStorage 存储的数据是明文存储的，因此不适合存储敏感信息。
YOUR_MAPTILER_API_KEY 需要替换成你自己的 MapTiler API Key。

总结

通过使用 LocalStorage API，我们可以轻松地实现 Web 地图应用中标记点的持久化存储，从而提升用户体验。本教程提供了一个简单的示例，展示了如何存储和加载标记点数据。根据你的具体需求，你可以扩展此方法以存储其他类型的数据或实现更复杂的功能。

以上就是使用 LocalStorage 持久化地图标记点：实现页面刷新后数据保留的详细内容，更多请关注其它相关文章！

上一篇：J*aScript音频播放控制：解决暂停失效问题

下一篇：J*aScript：将多维对象转换为字符串

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

发布时间：2025-10-26

点击量：

返回

4008988990