Google Maps多层嵌套圆形点击触发InfoWindow失效问题排查与解决

我有一个带地址表单的地图，用户输入地址后，地图会在该地址周围生成四个不同半径的圆形。期望点击每个圆形时弹出对应半径的InfoWindow，但目前只有最外层的大圆形能正常工作，内层小圆形点击后毫无反应。

原代码：

$( "#fAddress" ).on( "submit", function( event ) {
          event.preventDefault();
        
         geocoder = new google.maps.Geocoder();

          user_address = $("#address").val(); 
          geocoder.geocode({ address: user_address }, (results, status) => {
            if (status === "OK") {
             
              map.setCenter(results[0].geometry.location);
                
                
                const radCircle3 = new google.maps.Circle({
                  strokeColor: "#000000",
                  strokeOpacity: 0.8,
                  strokeWeight: 2,
                  fillColor: "#0000ff",
                  fillOpacity: 0.35,
                  map: map,
                  center: results[0].geometry.location,
                  content: "2,500 feet",
                  clickable: true,
                  radius: .3048 * 2500 //meters
                });
                
                const infoWindow = new google.maps.InfoWindow();
                google.maps.event.addListener(radCircle3, 'click', function(ev){ //works
                    infoWindow.setPosition(ev.latLng);
                    infoWindow.setContent("2,500 feet");
                    infoWindow.open(map);
                });
                
                const radCircle1 = new google.maps.Circle({
                  strokeColor: "#000000",
                  strokeOpacity: 0.8,
                  strokeWeight: 2,
                  fillColor: "#0000ff",
                  fillOpacity: 0.35,
                  map: map,
                  clickable: true,
                  center: results[0].geometry.location,
                  radius: .3048 * 500 //meters
                });
                
                google.maps.event.addListener(radCircle1, 'click', function(ev){
                    //infoWindow.open(map); //nothing happens
                    alert("500 feet"); //nothing happens
                });
                
                
                
                const radCircle2 = new google.maps.Circle({
                  strokeColor: "#000000",
                  strokeOpacity: 0.8,
                  strokeWeight: 2,
                  fillColor: "#0000ff",
                  fillOpacity: 0.35,
                  map,
                  center: results[0].geometry.location,
                  radius: .3048 * 1000 //meters
                });
                
                
                
                const radCircle4 = new google.maps.Circle({
                  strokeColor: "#000000",
                  strokeOpacity: 0.8,
                  strokeWeight: 2,
                  fillColor: "#0000ff",
                  fillOpacity: 0.35,
                  map,
                  center: results[0].geometry.location,
                  radius: .3048 * 750 //meters
                });

            } else {
             
              console.error("Geocode was not successful for the following reason: " + status);
            }
          });
        });

原因分析 #

Google Maps里的叠加层（比如你创建的Circle）是按创建顺序渲染的，后创建的会覆盖在先创建的上面。你现在先创建了最大的2500英尺圆形，后面的小圆圈全被它压在底下——点击内层区域时，实际触发的是最上层大圆圈的点击事件，小圆圈的点击逻辑根本没机会执行。

解决方案 #

两种思路任选其一即可：

1. 按半径从小到大创建圆形 #

先创建最小的圆，再依次创建更大的圆，确保小圆圈处于大圆圈的渲染上层，点击时能触发对应事件。修改后代码：

$("#fAddress").on("submit", function(event) {
  event.preventDefault();

  geocoder = new google.maps.Geocoder();
  user_address = $("#address").val(); 
  geocoder.geocode({ address: user_address }, (results, status) => {
    if (status === "OK") {
      map.setCenter(results[0].geometry.location);
      const infoWindow = new google.maps.InfoWindow();

      // 先创建最小的500英尺圆形
      const radCircle1 = new google.maps.Circle({
        strokeColor: "#000000",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#0000ff",
        fillOpacity: 0.35,
        map: map,
        clickable: true,
        center: results[0].geometry.location,
        radius: .3048 * 500 //meters
      });
      google.maps.event.addListener(radCircle1, 'click', function(ev){
        infoWindow.setPosition(ev.latLng);
        infoWindow.setContent("500 feet");
        infoWindow.open(map);
      });

      // 创建750英尺圆形
      const radCircle4 = new google.maps.Circle({
        strokeColor: "#000000",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#0000ff",
        fillOpacity: 0.35,
        map: map,
        clickable: true,
        center: results[0].geometry.location,
        radius: .3048 * 750 //meters
      });
      google.maps.event.addListener(radCircle4, 'click', function(ev){
        infoWindow.setPosition(ev.latLng);
        infoWindow.setContent("750 feet");
        infoWindow.open(map);
      });

      // 创建1000英尺圆形
      const radCircle2 = new google.maps.Circle({
        strokeColor: "#000000",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#0000ff",
        fillOpacity: 0.35,
        map: map,
        clickable: true,
        center: results[0].geometry.location,
        radius: .3048 * 1000 //meters
      });
      google.maps.event.addListener(radCircle2, 'click', function(ev){
        infoWindow.setPosition(ev.latLng);
        infoWindow.setContent("1000 feet");
        infoWindow.open(map);
      });

      // 最后创建最大的2500英尺圆形
      const radCircle3 = new google.maps.Circle({
        strokeColor: "#000000",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#0000ff",
        fillOpacity: 0.35,
        map: map,
        center: results[0].geometry.location,
        content: "2,500 feet",
        clickable: true,
        radius: .3048 * 2500 //meters
      });
      google.maps.event.addListener(radCircle3, 'click', function(ev){
        infoWindow.setPosition(ev.latLng);
        infoWindow.setContent("2,500 feet");
        infoWindow.open(map);
      });

    } else {
      console.error("Geocode was not successful for the following reason: " + status);
    }
  });
});

2. 手动设置zIndex控制层级 #

给每个圆形添加zIndex属性，半径越小的圆形设置越高的zIndex值，强制让小圆圈处于渲染上层。示例：

// 500英尺圆形设置最高zIndex
const radCircle1 = new google.maps.Circle({
  // 其他属性不变
  zIndex: 4
});

// 750英尺圆形
const radCircle4 = new google.maps.Circle({
  // 其他属性不变
  zIndex: 3
});

// 1000英尺圆形
const radCircle2 = new google.maps.Circle({
  // 其他属性不变
  zIndex: 2
});

// 2500英尺圆形设置最低zIndex
const radCircle3 = new google.maps.Circle({
  // 其他属性不变
  zIndex: 1
});

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