使用 localStorage 持久化地图标记数据_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

使用 localStorage 持久化地图标记数据

2025-10-26

浏览次数：次

返回列表

使用 localstorage 持久化地图标记数据

本文介绍了如何使用 J*aScript 和 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 s*eMarkersToLocalStorage(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优化方式于一体，使
0 查看详情
反序列化数据: 使用 JSON.parse() 方法将 JSON 字符串反序列化为 J*aScript 对象（在本例中是一个数组）。
创建并添加标记: 遍历反序列化后的数组，为每个经纬度坐标创建一个新的标记，并将其添加到地图上。

示例代码:

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 中的数据。可以创建一个全局的标记数组，每次修改标记时都更新这个数组，并调用 s*eMarkersToLocalStorage(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 s*eMarkersToLocalStorage() {
  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 数组
    s*eMarkersToLocalStorage(); // 保存标记到 localStorage

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

注意事项:

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

总结

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

以上就是使用 localStorage 持久化地图标记数据的详细内容，更多请关注其它相关文章！

# 键值 # 保定seo新站优化 # 乌兰察布网站优化哪家好 # 众云佳SEO优化公司 # seo应该从哪些方向做 # 网站怎么推广可靠易速达 # 无码云点播 seo oe # 北京网站网络推广选择 # 怎么用网络推广营销产品 # 成都专业seo公司 # 长春建设个人网站 # 数据存储 # 网上 # 图上 # javascript # 序列化 # 是一个 # 拖动 # 应用程序 # 购物系统 # 加载 # 键值对 # ai # 浏览器 # json # js # java

相关栏目：【科技资讯46185 】【网络学院92790 】

上一篇：React 应用中从 Local Storage 渲染数据的问题解决

下一篇：通过链接在J*aScript中打开Gmail应用

首页

关于我们

产品展示

咨询研究

新闻中心

留言板

联系我们

新闻中心 NEWS CENTER

使用 localStorage 持久化地图标记数据

存储和加载地图标记

使用 localStorage

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

总结