在带圆圈的标记中观察 position/radius 的变化

Question

我正在地图上用圆圈创建标记。如果标记和圆 position/radius 发生变化，是否可以以任何方式检测？我在我的地图上创建了许多带圆圈的标记，并将它们存储在 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)

Answer 1

根据 google.maps.Circle class, you can listen for the radius_changed 和 center_changed 事件的文档：

radius_changed
function()
Arguments: None
This event is fired when the circle's radius is changed.

center_changed
function()
Arguments: None
This event is fired when the circle's center is 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>

在带圆圈的标记中观察 position/radius 的变化

Watch for changes in position/radius in marker with circle

javascript

google-maps

google-maps-api-3

google-maps-markers