Google地图页面刷新保存标记咨询及现有功能代码说明

嘿，这个需求其实很容易实现，核心就是在页面加载时读取你之前存在Cookie里的坐标，然后重新渲染标记和半径圆就行。我给你梳理下具体步骤和代码调整：

1. 先写一个Cookie读取的辅助函数 #

因为直接读取document.cookie得到的是一串拼接字符串，我们需要一个小函数来提取指定的Cookie值：

function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}

2. 完善标记点放置时的Cookie存储逻辑 #

你原来的placeMarker函数需要把经纬度存入Cookie，同时把marker和circle设为全局变量，方便后续刷新时更新（避免重复创建）：

var marker;
var circle; // 全局变量，用于管理半径圆

function placeMarker(location) {
  // 将经纬度存入Cookie，这里设置7天有效期，可根据需求调整
  const expires = new Date();
  expires.setTime(expires.getTime() + (7 * 24 * 60 * 60 * 1000));
  document.cookie = `mapLat=${location.lat()}; expires=${expires.toUTCString()}; path=/`;
  document.cookie = `mapLng=${location.lng()}; expires=${expires.toUTCString()}; path=/`;

  // 更新或创建标记点
  if (marker) {
    marker.setPosition(location);
  } else {
    marker = new google.maps.Marker({
      position: location,
      map: map
    });
  }

  // 更新或创建半径圆（复用你原来的半径配置）
  if (circle) {
    circle.setCenter(location);
  } else {
    circle = new google.maps.Circle({
      map: map,
      radius: 24140, // 你的半径值，单位米
      fillColor: '#FF0000', // 可自定义填充色
      fillOpacity: 0.2,
      strokeColor: '#FF0000',
      strokeOpacity: 0.5
    });
  }
}

3. 页面加载时恢复标记点 #

在你的地图初始化函数（比如initMap）里，添加一段逻辑：读取Cookie中的经纬度，如果存在就恢复标记和圆，同时把地图中心定位到保存的位置：

function initMap() {
  // 初始化地图（用你原来的配置）
  map = new google.maps.Map(document.getElementById('map'), {
    center: { lat: -34.397, lng: 150.644 }, // 默认中心坐标
    zoom: 8
  });

  // 保留你原来的地图点击事件
  map.addListener('click', function(e) {
    placeMarker(e.latLng);
  });

  // 页面加载时恢复标记点
  const savedLat = getCookie('mapLat');
  const savedLng = getCookie('mapLng');
  if (savedLat && savedLng) {
    const savedLocation = new google.maps.LatLng(parseFloat(savedLat), parseFloat(savedLng));
    // 把地图中心移到保存的位置，提升用户体验
    map.setCenter(savedLocation);
    // 调用placeMarker恢复标记和圆
    placeMarker(savedLocation);
  }
}

几个注意点 #

• Cookie的path=/确保在整个网站下都能读取到这个Cookie，如果你只需要在当前页面生效，可以去掉这个配置
• 如果你希望Cookie仅在会话期间有效（关闭浏览器就消失），可以删除expires相关的代码
• 经纬度存储为字符串，读取时一定要用parseFloat转成数值类型，否则Google地图无法识别
• 如果用户手动清除了浏览器Cookie，标记点会恢复到默认状态，这是正常的行为

内容的提问来源于stack exchange，提问作者Theopap