在谷歌地图上，如何为不同的圆圈显示信息窗口，这些圆圈彼此层叠但半径不同？

Question

我有一张地图，上面有一个表格。用户输入一个地址，地图会在该地址周围放置四个不同半径的圆圈。我希望用户能够单击每个圆圈并获得一个信息窗口，说明该圆圈的半径是多少。我可以让它在最外层的圆圈（最大的圆圈）上工作，但对于其中较小的圆圈，什么也没有发生。为什么会发生这种情况，我该怎么办？

$( "#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.setPosition(ev.latLng);
                    //infoWindow.setContent("500 feet");
                    //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);
            }
          });
        });
     
    

Answer 1

一种选择是按大小顺序堆叠圆圈，最大的位于底部（首先添加到地图中）。

const radCircle3 = new google.maps.Circle({
   ...
   radius: 0.3048 * 2500, //meters
})

const radCircle2 = new google.maps.Circle({
   ...
   radius: 0.3048 * 1000, //meters
})

const radCircle4 = new google.maps.Circle({
   ...
   radius: 0.3048 * 750, //meters
})

const radCircle1 = new google.maps.Circle({
   ...
   radius: 0.3048 * 500, //meters
})

概念证明小提琴

代码片段：

let map
let marker
let geocoder
let responseDiv
let response

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 15,
    center: {
      lat: -34.397,
      lng: 150.644
    },
    mapTypeControl: false,
  })
  geocoder = new google.maps.Geocoder()

  geocoder.geocode({
    address: "New York, New York"
  }, (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,
        // zIndex: 0,
        radius: 0.3048 * 2500, //meters
      })

      const infoWindow = new google.maps.InfoWindow()
      google.maps.event.addListener(radCircle3, "click", function(ev) {
        //works
        infoWindow.setPosition(ev.latLng)
        infoWindow.setContent("radCircle3 2,500 feet")
        infoWindow.open(map)
      })

      const radCircle2 = new google.maps.Circle({
        strokeColor: "#000000",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#0000ff",
        fillOpacity: 0.35,
        map,
        clickable: true,
        // zIndex: 1,
        center: results[0].geometry.location,
        radius: 0.3048 * 1000, //meters
      })

      google.maps.event.addListener(radCircle2, "click", function(ev) {
        //works
        infoWindow.setPosition(ev.latLng)
        infoWindow.setContent("radCircle3 1000 feet")
        infoWindow.open(map)
      })


      const radCircle4 = new google.maps.Circle({
        strokeColor: "#000000",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#0000ff",
        fillOpacity: 0.35,
        map,
        // zIndex: 2,
        clickable: true,
        center: results[0].geometry.location,
        radius: 0.3048 * 750, //meters
      })
      google.maps.event.addListener(radCircle4, "click", function(ev) {
        //works
        infoWindow.setPosition(ev.latLng)
        infoWindow.setContent("radCircle4 750 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,
        // zIndex: 3,
        center: results[0].geometry.location,
        radius: 0.3048 * 500, //meters
      })

      google.maps.event.addListener(radCircle1, "click", function(ev) {
        //works
        infoWindow.setPosition(ev.latLng)
        infoWindow.setContent("radCircle1 500 feet")
        infoWindow.open(map)
      })


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

window.initMap = initMap

#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!doctype html>
<html>

<head>
  <title>Geocoding Service</title>

</head>

<body>
  <div id="map"></div>

  <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&v=weekly" defer></script>
</body>

</html>