Question

我在网页中使用Google地图。在该地图上，用户可以绘制圆圈。我有以下内容：

var myManager = new google.maps.drawing.DrawingManager({
  drawingMode: google.maps.drawing.OverlayType.MARKER,
  drawingControl: true,
  drawingControlOptions: {
    drawingModes: [
      google.maps.drawing.OverlayType.CIRCLE,
    ]
  },
  circleOptions: {
    clickable: true,
    editable: true,
    draggable: true,
    zIndex: 1
  }
});
myManager.setMap(new google.maps.Map(document.getElementById("roadMap"), {}););
myManager.setDrawingMode(null);

google.maps.event.addListener(myManager, 'circlecomplete', function(circle) {
        });

当用户绘图时，我想向他们展示圆的半径。换句话说，它可能会说1.25英里。然后随着圆圈的增长，它可能会达到2.0英里。有没有办法用谷歌地图做到这一点？如果是这样，怎么样？我没有成功地弄清楚如何做到这一点。

谢谢！

Answer 1

在circlecomplete事件触发之前，您无法访问该圈子。一旦发生这种情况，您可以显示半径，并为其添加radius_changed侦听器。

proof of concept fiddle

代码段

＆＃13;

var geocoder;
var map;
var circles = [];

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var myManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      drawingModes: [
        google.maps.drawing.OverlayType.CIRCLE
      ]
    },
    circleOptions: {
      clickable: true,
      editable: true,
      draggable: true,
      zIndex: 1
    }
  });
  myManager.setMap(map);
  myManager.setDrawingMode(null);

  google.maps.event.addListener(myManager, 'circlecomplete', function(circle) {
    google.maps.event.addListener(circle, 'radius_changed', function() {
      document.getElementById('info').innerHTML = "circle center = " + circle.getCenter().toUrlValue(6) + " radius = " + circle.getRadius().toFixed(2) + " meters";
    });
    circles.push(circle);
    document.getElementById('info').innerHTML = "circle center = " + circle.getCenter().toUrlValue(6) + " radius = " + circle.getRadius().toFixed(2) + " meters";
  });


}
google.maps.event.addDomListener(window, "load", initialize);

＆＃13;

html,
body,
#map_canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing"></script>
<div id="map_canvas" style=" border: 2px solid #3872ac;"></div>
<div id="info"></div>

＆＃13;

在Google地图绘图中显示数据

1 个答案: