更改 InfoWindow 文本并更新其中的半径

Question

我有一个信息窗口，我想在其中显示圆半径，但是我不知道如何在半径发生变化时更新文本。每当我控制台记录我的标记时，我都看不到 infoWindow 内容。是否还有圆形侦听器在半径发生变化时立即做出反应，而不是在半径发生变化后立即做出反应？

    let marker = await new google.maps.Marker({
        position: {
          lat: sort.position.lat + 0.002,
          lng: sort.position.lon + 0.002,
        },
        map: map.value,
        draggable: true,
        optimized: false,
        zIndex: 999999,
      });

      marker.Circle = await new google.maps.Circle({
        center: marker.getPosition(),
        radius: 100,
        map: map.value,
        editable: true,
      });

      let infoWindow = new google.maps.InfoWindow({content: `${marker.Circle.radius}`});
      infoWindow.open(map.value, marker);

      marker.Circle.addListener("radius_changed", () => {
        console.log(marker)
      });

Answer 1

您可以更改 InfoWindow

的内容

（您目前在 InfoWindow 中没有太多有趣的内容，如果您想要显示的不仅仅是半径，它会变得更复杂）

infoWindow.setContent(""+marker.Circle.getRadius().toFixed(2));

proof of concept fiddle

function initMap() {
  // Create the map.
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 16,
    center: {
      lat: 37.09,
      lng: -95.712
    },
    mapTypeId: "terrain",
  });

  let marker = new google.maps.Marker({
    position: {
      lat: map.getCenter().lat(),
      lng: map.getCenter().lng(),
    },
    map: map,
    draggable: true,
    optimized: false,
    zIndex: 999999,
  });

  marker.Circle = new google.maps.Circle({
    center: marker.getPosition(),
    radius: 100,
    map: map,
    editable: true,
  });

  let infoWindow = new google.maps.InfoWindow({
    content: `${marker.Circle.radius}`
  });
  infoWindow.open(map.value, marker);

  marker.Circle.addListener("radius_changed", () => {
    console.log(marker)
    infoWindow.setContent(""+marker.Circle.getRadius().toFixed(2));
  });
}

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
#map {
  height: 100%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Circles</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <div id="map"></div>

    <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&v=weekly&channel=2"
      async
    ></script>
  </body>
</html>

更改 InfoWindow 文本并更新其中的半径

Change InfoWindow text and update radius inside it

javascript

google-maps

google-maps-api-3