Question

我想知道如果可能的话我如何用按钮删除标记。我知道怎么做而没有画经理，但我需要画画经理，我不知道如何与他合作这是代码（只是一个例子）：

<!DOCTYPE html>
<html>
  <head>
    <title>Drawing tools</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=drawing"></script>
    <script>
function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(40.60033,-7.753715),
    zoom: 18
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        google.maps.drawing.OverlayType.MARKER,
        google.maps.drawing.OverlayType.POLYGON
             ]
    },
    markerOptions: {
      title: 'Hello'
    },
    circleOptions: {
      fillColor: '#ffff00',
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1
    }
  });
  drawingManager.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

Answer 1

首先，当您为markercomplete创建函数时，您必须调用DeleteShapesGoogleMaps函数，并为此案例发送参数形状（标记）。

其次，在DeleteShapesGoogleMaps（）函数中，删除之前创建的标记或任何形状，然后创建Drawingmanager的新控件

    google.maps.event.addListener(drawingManager, 'markercomplete', function (marker) {
        marker.setOptions({
            draggable: true
        });            
        google.maps.event.addListener(marker, 'dragend', function () {  
            // Put your code here when marker finish event drangend Example get LatLang 
            /*
                var objLatLng = marker.getPosition().toString().replace("(", "").replace(")", "").split(',');
                Lat = objLatLng[0];
                Lat = Lat.toString().replace(/(\.\d{1,5})\d*$/, "$1");// Set 5 Digits after comma
                Lng = objLatLng[1];
                Lng = Lng.toString().replace(/(\.\d{1,5})\d*$/, "$1");// Set 5 Digits after comma

            */
        });
        drawingManager.setOptions({ drawingControl: false });
        drawingManager.setDrawingMode(null);
        DeleteShapesGoogleMaps(marker);
    });// End markercomplete






function DeleteShapesGoogleMaps(shape) {
    google.maps.event.addListener(shape, 'click', function () {
        shape.setMap(null);
        drawingManager.setOptions({
            drawingControl: true,
            drawingControlOptions: {
                position: google.maps.ControlPosition.TOP_CENTER,
                drawingModes: [
                    google.maps.drawing.OverlayType.CIRCLE,
                    google.maps.drawing.OverlayType.POLYGON,
                    google.maps.drawing.OverlayType.MARKER
                ]
            }
        });

    }
}

Answer 2

您可以使用事件markercomplete事件，选择标记引用并将其删除。例如：

  google.maps.event.addListener(drawingManager, 'markercomplete', function(e) {
    console.log(e);
    setTimeout(function() {
        console.log('remove marker');
        e.setMap(null);
    }, 5000);

  });

请参阅Google参考。关于DrawingManager - events的文档。

如何在图纸管理器中删除标记

2 个答案: