TwinCAT下Google Maps addListener绑定circle点击事件失效

• 代码功能：基于Google Maps JS API绘制圆形区域并绑定点击回调
• 异常现象：同一份代码在TwinCAT框架的简单测试应用中可正常触发点击回调，部署到实际业务应用后无法收到点击通知；两种场景下鼠标悬浮到圆形上时显示的光标样式存在差异，第一张截图对应功能正常的光标状态，第二张对应点击失效的光标状态，已排查排除z-order层级问题。

<div id="mapdiv3" style="width:100%;height:100%" data-tchmi-zindex="0"></div>
<script>
   setTimeout(() => {
       initMap3();
   }, 1000)
       
   var circles3;       
   function initMap3() {
       var mapProp = {
           center: { lat: 63.320443, lng: 9.856220 },
           zoom: 16,
           minZoom: 1,
           fullscreenControl: false,
           zoomControl: false,
           mapTypeId: google.maps.MapTypeId.HYBRID
       };
       var map = new google.maps.Map(document.getElementById("mapdiv3"), mapProp);
       circles3 = new Array();
   
       for (var city in citymap) {
           var populationOptions = {
               strokeColor: '#FF0000',
               strokeOpacity: 0.8,
               strokeWeight: 2,
               fillColor: '#FF0000',
               fillOpacity: 0.35,
               map: map,
               center: citymap[city].center,
               radius: Math.sqrt(.02) * 100
           };
           // 向地图添加圆形
           var circle = new google.maps.Circle(populationOptions);
           circle.setMap(map);
           circles3.push(circle);
   
           google.maps.event.addListener(circle, 'click', function (e) {
               var locs = { lat: e.latLng.lat(), lng: e.latLng.lng() };
   
               for (var ii = 0; ii < circles3.length; ii++) {
                   var b = circles3[ii].contains(new google.maps.LatLng(e.latLng.lat(), e.latLng.lng()));
                   if (b == true) {
                       console.log(Object.values(citymap)[ii].name);
                       break;
                   }
               }
           });
       }
       google.maps.Circle.prototype.contains = function (latLng) {
           return this.getBounds().contains(latLng) && google.maps.geometry.spherical.computeDistanceBetween(this.getCenter(), latLng) <= this.getRadius();
       }
   }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=&libraries=geometry" async defer></script>

• 优先排查上层透明遮挡层：业务应用中大概率存在全局透明遮罩（如加载锁层、弹窗占位层、框架交互容器），即使z-index配置看似正确，只要该层位于地图画布上方且pointer-events属性为auto，就会直接拦截所有鼠标事件，导致Google Maps无法命中圆形元素，光标会显示为默认箭头而非交互手型。可通过浏览器元素检查器选中悬浮位置的顶层元素，若不是地图对应的canvas元素，删除该遮挡层或给其设置pointer-events: none即可修复。
• 修正API加载时序：当前用固定1秒延时初始化地图存在隐患，业务应用页面资源更多时，Google Maps JS API可能未完成加载就执行初始化，会导致Circle对象事件绑定异常。去掉固定setTimeout，把初始化逻辑放到API加载完成的回调中执行，避免时序问题。
• 显式声明圆形可点击属性：初始化Circle的配置中未显式设置clickable: true，在部分API版本或TwinCAT运行环境下，该属性默认值可能被覆盖为false，此时圆形不会响应任何鼠标事件，悬浮时也不会切换手型光标，在populationOptions中补充该属性即可。
• 排查框架事件拦截逻辑：TwinCAT HMI业务模板通常会自带全局事件路由逻辑，会拦截容器内的鼠标事件用于框架自身交互，测试应用未加载这部分逻辑所以运行正常。可先给mapdiv3绑定原生click事件打日志，若点击圆形时原生事件都无法触发，说明是框架层拦截了事件，需要在框架配置中给地图容器放开事件权限。
• 排查全局CSS污染：业务应用中引入的全局CSS可能给canvas、div元素设置了pointer-events: none等影响鼠标交互的属性，测试应用无相关全局样式所以不受影响。可在元素检查器中查看地图canvas的计算后样式，确认pointer-events值为auto，若被全局样式覆盖，单独给地图容器设置更高优先级的样式修正即可。

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