基于jQuery创建地图全局变量后仍无法添加标记的问题

嘿，我刚碰到过类似的坑！咱们一步步拆解问题，搞定这个全局变量的事儿～

• 先确认全局变量的声明位置与方式
  你说在函数外部创建了map变量，但还是报错，大概率是声明或初始化的姿势不对。要确保变量在所有函数的最外层作用域声明，而且初始化时不要重新覆盖它：

  // 全局作用域声明map，不要写在任何函数内部
  let map; 
  
  $(document).ready(function() {
    // 这里只给全局map赋值，不要重新用let/var声明！
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 8
    });
  });
  
  function processPosition(position) {
    // 现在就能正常访问全局map了
    const userMarker = new google.maps.Marker({
      position: {lat: position.coords.latitude, lng: position.coords.longitude},
      map: map,
      title: '你的当前位置'
    });
  }
  

• 排查是否存在作用域覆盖
  很容易犯的一个错：在$(document).ready里又写了let map = ...，这时候函数内部的map会变成局部变量，直接覆盖全局的那个，导致processPosition里拿不到正确的地图实例。一定要检查初始化代码里有没有重复声明。

• 确保地图初始化在标记添加之前
  如果processPosition在地图还没初始化完成就被调用了，map会是undefined。可以加个简单的判断兜底：

  function processPosition(position) {
    if (!map) {
      console.error('地图还没初始化完成，请稍后再试！');
      return;
    }
    // 继续执行添加标记的逻辑
  }
  

• 终极兜底：挂载到window对象
  如果以上方法都不行，直接把map挂到window上，确保它是绝对全局的：

  $(document).ready(function() {
    window.map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 8
    });
  });
  
  function processPosition(position) {
    // 直接用window.map访问，绝对不会有作用域问题
    const userMarker = new google.maps.Marker({
      position: {lat: position.coords.latitude, lng: position.coords.longitude},
      map: window.map,
      title: '你的当前位置'
    });
  }
  

内容的提问来源于stack exchange，提问作者Jacques Le Breuilly