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

How do I disable Google Maps drawing tool without disabling the editing?

本文关键字：情况下 谷歌地图 绘图 工具 编辑      更新时间：2023-09-26

我正在努力做到这一点：
用户可以在谷歌地图上画圆圈
用户可以更改它：拖动它并更改半径
用户无法绘制其他圆
在每一个事件中，我都想得到圆心和它的半径。

现在用户可以画圆，我会收到中心的坐标和半径，但在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'
}

将侦听器添加到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>

相关文章：