Google Maps实现5米圆形默认隐藏，鼠标悬停区域时显示的问题

问题出在你把Circle设为setVisible(false)后，这个元素会从地图的DOM树里移除，自然没法触发鼠标事件。要实现默认隐藏、悬停显示的效果，得用一个透明的占位Circle来监听鼠标操作，实际要显示的Circle默认隐藏，通过占位Circle的事件来控制它的显示/隐藏。

修改后的代码如下：

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 18, // 5米半径在低缩放级别下太小，调大zoom方便测试
  });
  const radius = 5; // meters

  // 实际要显示的圆形，默认隐藏
  const displayCircle = new google.maps.Circle({
    strokeColor: "#FF0000",
    strokeOpacity: 1,
    strokeWeight: 1,
    fillColor: "#FF0000",
    fillOpacity: 0.3, // 加填充透明度方便查看效果
    map: map,
    center: map.getCenter(),
    radius: radius,
    visible: false // 默认隐藏
  });

  // 透明占位圆形，仅用来监听鼠标事件
  const placeholderCircle = new google.maps.Circle({
    strokeOpacity: 0, // 边框完全透明
    fillOpacity: 0,   // 填充完全透明
    map: map,
    center: map.getCenter(),
    radius: radius,
    visible: true // 必须保持可见才能触发鼠标事件
  });

  // 通过占位圆形的事件控制显示圆形的可见性
  placeholderCircle.addListener('mouseover', function() {
    displayCircle.setVisible(true);
  });

  placeholderCircle.addListener('mouseout', function() {
    displayCircle.setVisible(false);
  });

  map.fitBounds(displayCircle.getBounds());
}

window.initMap = initMap;

关键说明：

• 拆分出两个Circle：placeholderCircle负责接收鼠标事件，displayCircle负责展示视觉效果
• 占位Circle保持可见但完全透明，用户看不到但能响应鼠标操作
• 调高地图缩放级别，避免5米半径的区域太小导致鼠标难以定位

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