Google Maps JS API v3-如何在拖动形状的点后禁用“撤消”功能

时间:2019-05-10 12:34:24

标签: javascript google-maps google-maps-api-3

我正在使用drawingManager库来允许用户在地图上创建形状(多边形和圆形)。绘制形状后,用户可以通过拖动其顶点/节点来对其进行编辑。

Id想禁用“撤消”功能并隐藏“后退”箭头,该箭头在移动多边形或圆形节点后显示。

示例

https://i.stack.imgur.com/cKhEG.png

screenshot of "undo" icon

代码段

var labels = [];
var allOverlays = [];

function setSelection(shape) {
  selectedShape = shape;
  shape.setEditable(true);
}

function initMap() {
  var options = {
    zoom: 14,
    center: {
      lat: 52.250618,
      lng: 20.9774
    }
  };

  var map = new google.maps.Map(document.getElementById("map"), options);

  var drawingManager = new google.maps.drawing.DrawingManager({
    polygonOptions: {
      draggable: false,
      fillColor: "#5C6BC0",
      fillOpacity: 0.45,
      strokeWeight: 0,
      editable: true,
      zIndex: 1
    },
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: ["polygon"]
    },
    map: map,
    drawingMode: 'polygon'
  });

  function attachPolygonInfoWindow(polygon) {
    if (!polygon.labels) polygon.labels = [];
    for (var i = 0; i < polygon.labels.length; i++) {
      polygon.labels[i].setMap(null);
    }
    polygon.labels = [];
    var path = polygon.getPath();
    var points = path.getArray();
    var area = google.maps.geometry.spherical
      .computeArea(path.getArray())
      .toFixed(0);
    var bounds = new google.maps.LatLngBounds();
    var i;

    for (i = 0; i < points.length; i++) {
      bounds.extend(points[i]);
    }

    var boundsCenter = bounds.getCenter();
    var centerLabel = new MapLabel({
      map: map,
      fontSize: 20,
      align: "left"
    });

    polygon.labels.push(centerLabel);

    centerLabel.set("position", bounds.getCenter());
    centerLabel.set("text", area + "m2");
    if (path.getLength() < 2) return;
    for (var i = 0; i < polygon.getPath().getLength(); i++) {
      // for each side in path, compute center and length
      var start = polygon.getPath().getAt(i);
      var end = polygon.getPath().getAt(i < polygon.getPath().getLength() - 1 ? i + 1 : 0);
      var sideLength = google.maps.geometry.spherical.computeDistanceBetween(start, end);
      var sideCenter = google.maps.geometry.spherical.interpolate(start, end, 0.5);
      var sideLabel = new MapLabel({
        map: map,
        fontSize: 20,
        align: "center"
      });
      sideLabel.set("position", sideCenter);
      sideLabel.set("text", sideLength.toFixed(2) + "m");
      polygon.labels.push(sideLabel);
    }
  }

  function removePolygonInfoWindow() {
    for (var i = 0; i < labels.length; i++) {
      labels[i].setMap(null);
    }
    labels = [];
  }

  google.maps.event.addListener(drawingManager, "overlaycomplete", function(e) {
    allOverlays.push(e);

    if (e.type != google.maps.drawing.OverlayType.MARKER) {
      drawingManager.setDrawingMode(null);

      var newShape = e.overlay;
      newShape.type = e.type;

      google.maps.event.addListener(newShape, "click", function() {
        setSelection(newShape);
      });

      if (newShape.type == "polygon") {
        var path = newShape.getPath();

        google.maps.event.addListener(path, "insert_at", function() {
          attachPolygonInfoWindow(newShape);
        });

        google.maps.event.addListener(path, "set_at", function() {
          attachPolygonInfoWindow(newShape);
        });

        attachPolygonInfoWindow(newShape);
      }

      setSelection(newShape);
    }
  });
}

initMap();
html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=drawing"></script>
<script src="https://cdn.jsdelivr.net/npm/js-map-label@1.0.1/src/maplabel.js"></script>

0 个答案:

没有答案