谷歌地图自定义控件位置调整报错求助：resize时控件移动失败

我来帮你拆解下这个报错的核心原因：你碰到的Uncaught TypeError: Cannot read property 'parentNode' of undefined，本质是你尝试移除的$controlsTabs控件，并不在你指定的LEFT_TOP控件集合里，或者已经被移除过了。Google Maps的控件管理系统在操作不存在的元素时，内部会尝试访问元素的parentNode，找不到对应元素就会抛出这个错误。

另外你用pop()方法也有问题：pop()是移除集合里的最后一个元素，它不一定就是你的$controlsTabs，这会导致错误的控件被移除，同时你的目标控件可能还留在原位置，后续的push操作也会出问题。

给你几个实用的修复方案，一步步来：

方案1：精准定位控件，避免重复操作 #

首先给你的控件加个自定义属性，用来记录它当前所在的位置，这样resize时就能准确判断是否需要移动：

// 初始化控件时，记录初始位置
$controlsTabs.dataset.controlPosition = google.maps.ControlPosition.LEFT_TOP;
this.map.controls[google.maps.ControlPosition.LEFT_TOP].push($controlsTabs);

// 改写resize事件处理函数
window.onresize = () => {
  const targetPosition = screen.width <= 900 
    ? google.maps.ControlPosition.RIGHT_CENTER 
    : google.maps.ControlPosition.LEFT_TOP;
  
  // 如果当前位置已经是目标位置，直接跳过
  if ($controlsTabs.dataset.controlPosition === targetPosition.toString()) {
    return;
  }

  // 从原位置精准移除控件
  const currentControls = this.map.controls[$controlsTabs.dataset.controlPosition];
  const index = Array.from(currentControls).indexOf($controlsTabs);
  if (index !== -1) {
    currentControls.removeAt(index);
  }

  // 添加到新位置
  this.map.controls[targetPosition].push($controlsTabs);
  // 更新记录的位置
  $controlsTabs.dataset.controlPosition = targetPosition.toString();
};

方案2：简化逻辑，清空后重新添加（适合控件少的场景） #

如果你的控件集合里只有这一个自定义控件，也可以用更简单的方式：先清空两个位置的控件，再根据屏幕尺寸添加到对应位置。不过这个方法只适合控件数量少的场景，避免误删其他系统控件：

window.onresize = () => {
  // 先清空两个位置的控件（仅当这两个位置只有你的自定义控件时使用）
  this.map.controls[google.maps.ControlPosition.LEFT_TOP].clear();
  this.map.controls[google.maps.ControlPosition.RIGHT_CENTER].clear();

  // 根据屏幕尺寸添加到对应位置
  const targetPosition = screen.width <= 900 
    ? google.maps.ControlPosition.RIGHT_CENTER 
    : google.maps.ControlPosition.LEFT_TOP;
  this.map.controls[targetPosition].push($controlsTabs);
};

关键注意点 #

• 不要用pop()移除指定控件：pop()只能移除集合末尾元素，无法精准定位你的控件，一定要通过索引找到后用removeAt()移除
• 避免重复操作：每次resize时先判断控件是否已经在目标位置，减少不必要的DOM操作，也能避免报错
• 提前校验元素有效性：在执行操作前可以加个判断，比如if (!$controlsTabs) return;，防止元素不存在时触发错误

内容的提问来源于stack exchange，提问作者Роман Татаринов