Question

我正试着这样做：
用户可以在谷歌地图上绘制圆圈
用户可以更改它：拖动它并改变半径
用户无法绘制额外的圆圈
在每个事件中，我想要接收圆的中心和它的半径。

现在用户可以绘制圆圈，我将收到中心的坐标和半径，但在circlecomplete事件后，我无法检索有关编辑的任何数据（拖动和半径变化）

这里是代码：

var mapOptions = {
        center: this.mapCenterLatLng(),
        zoom: this.state.initialZoom,
        disableDefaultUI: true
      },
      map = new google.maps.Map(this.getDOMNode(), mapOptions);
var drawingManager;
if(!this.props.lat)(
  drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.CIRCLE,
    drawingControl: false,
    circleOptions: {
      fillColor: '#4dd0e1',
      strokeColor: '#4dd0e1',
      fillOpacity: 0.3,
      strokeWeight: 2,
      clickable: false,
      editable: true,
      zIndex: 1
    }
  }),
  drawingManager.setMap(map),
  google.maps.event.addListener(drawingManager, 'circlecomplete', onCircleComplete)
)

function onCircleComplete (shape) {
  $('#closeMapModal.success').animate({
    opacity: 1
  }, 500)      
  drawingManager.drawingMode = null;
  drawingManager.setMap(map);
  var circle;
  if (shape == null || (!(shape instanceof google.maps.Circle))) return;

  if (circle != null) {
    circle.setMap(null);
    circle = null;
  }

  circle = shape;
  var area = [circle.getRadius(), circle.getCenter().lat(), circle.getCenter().lng()]
  console.log(area) // HERE THE COORDS I'M RECEIVING ON 'circlecomplete'

}

Answer 1

将监听器添加到circlecomplete上的圆圈，以便在更改时为您提供坐标和半径。

google.maps.event.addListener(circle, `center_changed`, logData);
google.maps.event.addListener(circle, `radius_changed`, logData);

代码段

var map;
var uniqueId = 0;
var drawingManager;
var circle;

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
    });

  drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.CIRCLE,
    drawingControl: false,
    circleOptions: {
      fillColor: '#4dd0e1',
      strokeColor: '#4dd0e1',
      fillOpacity: 0.3,
      strokeWeight: 2,
      clickable: false,
      editable: true,
      zIndex: 1
    }
  });
  drawingManager.setMap(map);
  google.maps.event.addListener(drawingManager, 'circlecomplete', onCircleComplete);
  google.maps.event.addDomListener(document.getElementById('done'), 'click', doneWithCircle)
}

function onCircleComplete(shape) {
  drawingManager.setDrawingMode(null);
  drawingManager.setMap(map);
  if (shape == null || (!(shape instanceof google.maps.Circle))) return;

  if (circle != null && circle.setMap) {
    circle.setMap(null);
    circle = null;
  }

  circle = shape;
  circle._uniqueId = uniqueId++;
  var area = [circle.getRadius(), circle.getCenter().lat(), circle.getCenter().lng()]
  logData(circle);
  google.maps.event.addListener(circle, `center_changed`, logData);
  google.maps.event.addListener(circle, `radius_changed`, logData);

}

function logData() {
  // HERE THE COORDS I'M RECEIVING ON 'circlecomplete'
  document.getElementById('circle_coords').innerHTML = circle._uniqueId + "<br/>center: " + circle.getCenter() + "<br/>radius: " + circle.getRadius();
};

function doneWithCircle() {
  if (circle != null && circle.setMap) {
    circle.setMap(null);
    circle = null;
  }
  drawingManager.setDrawingMode(google.maps.drawing.OverlayType.CIRCLE);
}
google.maps.event.addDomListener(window, "load", initialize);

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

<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script>
<input type="button" value="delete" id="done" />
<div id="circle_coords"></div>
<div id="map_canvas"></div>

如何在不禁用编辑的情况下禁用Google地图绘图工具？

1 个答案: