用圆圈观察标记中位置/半径的变化答案

【问题标题】：Watch for changes in position/radius in marker with circle用圆圈观察标记中位置/半径的变化
【发布时间】：2021-09-08 05:24:17
【问题描述】：

我正在地图上创建带有圆圈的标记。如果标记和圆的位置/半径发生变化，是否可以以任何方式检测？我在地图上创建了许多带有圆圈的标记，并将它们存储在map.value.circles 数组中，每当我移动它们中的任何一个时，它们都会在这个数组中更新。但是如何用 js 检测到呢？

这就是圆的制作方式。

     let marker = new google.maps.Marker({
          position: { lat: lat(), lng: lng() },
          label: `${labelName}`,
          map: map.value,
          draggable: true
        });
        marker.Circle = new google.maps.Circle({
          center: marker.getPosition(),
          strokeColor: "#3B82F6",
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: "#3B82F6",
          fillOpacity: 0.35,
          radius: 100,
          map: map.value,
          editable: true
        })
        marker.Circle.bindTo('center', marker, 'position');

        map.value.circles.push(marker)

【问题讨论】：

标签： javascript google-maps google-maps-api-3 google-maps-markers

【解决方案1】：

根据google.maps.Circle 类的文档，您可以监听radius_changed 和center_changed 事件：

radius_changed
函数()
参数：无
当圆的半径改变时触发此事件。

center_changed
函数()
参数：无
当圆的中心改变时触发此事件。

marker.Circle.addListener('center_changed', function() {
  document.getElementById('center').innerHTML = "center="+marker.getPosition().toUrlValue(6);
});
marker.Circle.addListener('radius_changed', function() {
  document.getElementById('radius').innerHTML = "radius="+marker.Circle.getRadius().toFixed(2);
});

proof of concept fiddle

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

  let marker = new google.maps.Marker({
    position: map.getCenter(),
    label: "label",
    map: map,
    draggable: true
  });
  marker.Circle = new google.maps.Circle({
    center: marker.getPosition(),
    strokeColor: "#3B82F6",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#3B82F6",
    fillOpacity: 0.35,
    radius: 100,
    map: map,
    editable: true
  })
  marker.Circle.bindTo('center', marker, 'position');
  marker.Circle.addListener('center_changed', function() {
    document.getElementById('center').innerHTML = "center=" + marker.getPosition().toUrlValue(6);
  });
  marker.Circle.addListener('radius_changed', function() {
    document.getElementById('radius').innerHTML = "radius=" + marker.Circle.getRadius().toFixed(2);
  })


  map.circles.push(marker)
  map.fitBounds(marker.Circle.getBounds())
}

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map {
  height: 80%;
}


/* 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="center"></div>
  <div id="radius"></div>
  <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&libraries=&v=weekly" async></script>
</body>

</html>

【讨论】：