从谷歌地图drawingManager V3中删除多边形

Posted 2023-02-23

【中文标题】从谷歌地图drawingManager V3中删除多边形

【英文标题】：Removing polygon from google maps drawingManager V3

【发布时间】：2012-07-22 20:40:58

【问题描述】：

我有一个用户可编辑的谷歌地图，用户可以使用绘图管理器在地图上绘制叠加多边形。这工作正常，控制台记录了我需要的 lat lngs。但是，我需要添加一个按钮来清除多边形的地图，以便他们在出错时可以再次绘制。我的实现代码贴在下面：

geocoder = new google.maps.Geocoder();
      var latlng = new google.maps.LatLng(<?php echo $latitude ?>, <?php echo $longitude ?>);
       var myOptions = 
         zoom: <?php echo $zoomlevel ?>,
         center: latlng,
         mapTypeId: google.maps.MapTypeId.ROADMAP
       ;
       var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

       marker = new google.maps.Marker(
         map:map,
         draggable:true,
         animation: google.maps.Animation.DROP,
         position: latlng
       )

       pos = marker.position;
       //alert(pos);
       document.getElementById("gpsite-surgery-latitude").value = pos.lat();
       document.getElementById("gpsite-surgery-longitude").value = pos.lng();

       google.maps.event.addListener(marker, "dragend", function() 
               var myLatLng = marker.latLng;

               pos = marker.position;
               //alert(pos);
               document.getElementById("gpsite-surgery-latitude").value = pos.lat();
               document.getElementById("gpsite-surgery-longitude").value = pos.lng();
       )

       google.maps.event.addListener(map, 'zoom_changed', function() 
          document.getElementById("gpsite-surgery-zoomlevel").value = map.getZoom();
       );

       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.POLYGON]
        ,
        polygonOptions: 
            fillColor: '#ffff00',
            fillOpacity: 0.4,
            strokeWeight: 3,
            clickable: true,
            zIndex: 1,
            editable: false
        
       );


       google.maps.event.addListener(drawingManager, 'polygoncomplete', function (polygon) 
            var coordinates = (polygon.getPath().getArray());
            console.log(coordinates);
        );

       drawingManager.setMap(map);

   );

地图上还有一个标记，你可以忽略这个。

【参考方案1】：

对于单个多边形叠加，我这样做了：

var _myPolygon; // global variable to store the polygon instance

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) 
    _myPolygon = e.overlay;
);

$('#delete-button').on('click', function() 
    _myPolygon.setMap(null);
);

【参考方案2】：

检查这段代码，听起来和你说的一模一样，一个删除形状的按钮

http://gmaps-samples-v3.googlecode.com/svn-history/r282/trunk/drawing/drawing-tools.html

编辑： 上面的链接已损坏，但我能够找到该代码 here。

  // globals
  var drawingManager;
  var selectedShape;

  ...

  function clearSelection() 
    if (selectedShape) 
      selectedShape.setEditable(false);
      selectedShape = null;
    
  

  function setSelection(shape) 
    clearSelection();
    selectedShape = shape;
    shape.setEditable(true);
    selectColor(shape.get('fillColor') || shape.get('strokeColor'));
  

  function deleteSelectedShape() 
    if (selectedShape) 
      selectedShape.setMap(null);
    
  

     google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) 
        if (e.type != google.maps.drawing.OverlayType.MARKER) 
        // Switch back to non-drawing mode after drawing a shape.
        drawingManager.setDrawingMode(null);

        // Add an event listener that selects the newly-drawn shape when the user
        // mouses down on it.
        var newShape = e.overlay;
        newShape.type = e.type;
        google.maps.event.addListener(newShape, 'click', function() 
          setSelection(newShape);
        );
        setSelection(newShape);
      
    );

    // Clear the current selection when the drawing mode is changed, or when the
    // map is clicked.
    google.maps.event.addListener(drawingManager, 'drawingmode_changed', clearSelection);
    google.maps.event.addListener(map, 'click', clearSelection);
    google.maps.event.addDomListener(document.getElementById('delete-button'), 'click', deleteSelectedShape);

    buildColorPalette();
  

【参考方案3】：

您需要在全局上下文中引用多边形。然后在按钮调用polygon.setMap(null)的单击处理函数中（其中polygon是对多边形的全局引用，从您发布的不完整的sn-p中无法判断它是否是全局的）

【讨论】：

这一切都在我的文档中。准备好了。我不知道为多边形调用单击事件处理程序的语法。谷歌文档是不完整的，因为它在圆上做了很多，但在多边形上做的不多

我也意识到我不能全局引用多边形，因为如前所述，它是用户使用绘图管理器输入的多边形。似乎没有办法让用户删除它