页面重载后Google Map变灰，点击获取经纬度功能异常咨询

嘿，我之前也碰到过类似的Google Maps加载异常的问题，结合你描述的「首次正常、重载变灰且无报错」的情况，大概率是这几个常见原因导致的，咱们一步步排查修复：

1. 地图容器的尺寸未正确生效 #

Google Maps渲染依赖容器有明确的宽高尺寸，如果页面重载时容器样式没及时加载（比如样式是异步加载的、或者容器被隐藏后再显示），就会导致地图变灰。

修复方案：

• 给地图容器添加固定的宽高样式，避免布局漂移：

#map-container {
  width: 100%;
  height: 600px; /* 根据你的需求调整 */
  position: relative; /* 避免某些布局引擎的兼容性问题 */
}

• 确保容器渲染完成后再初始化地图，比如用延迟监听或IntersectionObserver：

// 简单延迟确保DOM渲染完成
setTimeout(() => {
  initMap(); // 你的地图初始化函数
}, 100);

// 更优雅的方式：监听容器可见性后再初始化
const mapContainer = document.getElementById('map-container');
const observer = new IntersectionObserver((entries) => {
  if (entries[0].isIntersecting) {
    initMap();
    observer.disconnect(); // 监听一次即可
  }
});
observer.observe(mapContainer);

2. API重复加载/地图实例重复初始化 #

页面重载时，可能重复加载了Google Maps API脚本，或者多次调用了地图初始化函数，导致内部资源冲突，但API本身的错误处理机制掩盖了报错，最终地图无法正常渲染。

修复方案：

• 确保API脚本只加载一次，用全局变量标记加载状态：

let mapsApiLoaded = false;

function loadMapsApi() {
  if (!mapsApiLoaded) {
    const script = document.createElement('script');
    script.src = 'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap';
    script.async = true;
    script.defer = true;
    document.body.appendChild(script);
    mapsApiLoaded = true;
  } else {
    // 已加载过API，直接初始化地图
    initMap();
  }
}

// 页面加载时触发API加载
window.addEventListener('load', loadMapsApi);

• 每次初始化前销毁旧的地图实例，避免容器被多个实例抢占：

let mapInstance = null;

function initMap() {
  // 先销毁旧实例
  if (mapInstance) {
    mapInstance.setMap(null);
    mapInstance = null;
  }
  // 创建新的地图实例
  mapInstance = new google.maps.Map(document.getElementById('map-container'), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
  // 你的点击获取经纬度逻辑
  mapInstance.addListener('click', (e) => {
    console.log(`纬度：${e.latLng.lat()}，经度：${e.latLng.lng()}`);
  });
}

3. Cookie读取逻辑存在隐性问题 #

你代码里的getCookie函数看起来被截断了，如果这个函数存在逻辑错误（比如未处理Cookie不存在的情况、语法错误），可能会阻塞后续的地图初始化流程，但错误被隐性捕获了，导致控制台无提示。

修复方案：

• 补全并校验getCookie函数的完整性，确保它不会抛出未捕获的错误：

function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  // 处理Cookie不存在的情况
  if (parts.length === 2) return parts.pop().split(';').shift();
  return null;
}

• 确保Cookie相关逻辑不会延迟地图初始化，比如不要把地图初始化放在依赖Cookie的异步流程里，除非你明确保证Cookie读取完成后再执行初始化。

先从容器尺寸和API加载这两点入手排查，这是最常见的触发场景，一般都能解决问题。

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