为何Google Maps控件仅支持元素变量而非jQuery ID选择器修改？

我习惯用jQuery的ID选择器修改Google Maps控件的内容，但发现地图控件只能通过变量引用的实际元素修改，无法通过元素ID生效。示例里，通过变量引用的testcontrol_2控件背景成功改成红色，而用ID选择的testcontrol_1控件背景还是白色，想知道这个现象的原因。

复现代码 #

<html>
<head>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDbFd34Z8SoF6Q9v3RQnkwy5nDDw09tvww"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
      .mapframe {
        width: 100%;
        height: 50em;
      }

      .mapcontrol {
        padding: 1em;
        background-color: #ffffff;
      }
    </style>
</head>
<body>
<div id="mapframe" class="mapframe"></div>
<script>
      var map;
      var centerControlContainer;
      var centerControlId = 'mainCenterControlFrame';
      var testControl2;

      function mapinit() {
        let mapinit = {
          center: new google.maps.LatLng(51.509865, -0.118092),
          zoom: 10,
          minzoom: 15,
          maxzoom: 21,
        };
        map = new google.maps.Map(document.getElementById('mapframe'), mapinit);
        google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
          GMapready();
        });
      }

      function GMapready() {
        centerControlContainer = document.createElement('div');
        $(centerControlContainer).addClass('mapControlContainer');
        $(centerControlContainer).attr('id', centerControlId);
        
        $(centerControlContainer).html('<div id="testcontrol_1" class="mapcontrol">TestControl1</div>');

        testControl2 = document.createElement('div');
        $(testControl2).attr('id', 'testcontrol_2');

        $(testControl2).html('TestControl2');
        $(testControl2).addClass('mapcontrol');
        $(centerControlContainer).append(testControl2);

        this.map.controls[google.maps.ControlPosition.TOP_CENTER].push(this.centerControlContainer);

        $('#testcontrol_1').css('background-color', '#ff0000');
        $(testControl2).css('background-color', '#ff0000');

      }

      mapinit();
</script>
</body>
</html>

核心原因在于jQuery选择器的查询机制与Google Maps控件的DOM挂载时机不匹配：

• jQuery的ID选择器（$('#testcontrol_1')）仅能查询已经挂载到页面文档DOM树中的元素。在你的代码中，虽然调用了map.controls[...].push(centerControlContainer)，但Google Maps并不会立即将这个容器插入到页面DOM中——此时testcontrol_1只是存在于内存中的DOM节点，并没有真正成为页面文档的一部分，因此jQuery无法查询到它，样式修改也就不会生效。

• 而testControl2是你直接创建并持有引用的DOM元素，你通过变量直接操作这个元素本身：不管它是否已经挂载到页面DOM，修改元素的样式属性都会直接生效，因为这是对内存中的DOM节点进行直接操作，不需要依赖文档查询。

可行的解决方法 #

方法1：通过容器元素内部查询 #

不需要依赖全局ID查询，直接从centerControlContainer中查找子元素，这种方式不依赖元素是否挂载到文档：

// 替换原有的$('#testcontrol_1').css(...)代码
$(centerControlContainer).find('#testcontrol_1').css('background-color', '#ff0000');

方法2：延迟执行查询 #

利用setTimeout等方式，等待Google Maps完成控件的DOM挂载后再执行样式修改：

// 替换原有的样式修改代码
setTimeout(() => {
  $('#testcontrol_1').css('background-color', '#ff0000');
}, 100);

这种方式需要注意延迟时间的合理性，避免因地图加载速度差异导致失效。

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