从谷歌地图drawingManager V3中删除多边形 [英] Removing polygon from google maps drawingManager V3

问题描述

我有一个用户可编辑的Google地图，用户可以使用绘图管理器在地图上绘制覆盖多边形。这工作正常，控制台记录我需要的经度。然而，我需要添加一个按钮来清除多边形的地图，以便在出现错误时再次绘制。我的实现代码粘贴在下面：

  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，
位置：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-经度）。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，
可编辑：false 
 } 
}）; 
 
 
 google.maps.event.addListener（drawingManager，'polygoncomplete'，function（polygon）{
 var coordinates =（polygon.getPath（）。getArray（））; 
 console.log（coordinates）; 
}）; 
 
 drawingManager.setMap（map）; 
 
}）; 
  

地图上还有一个标记，您可以忽略它。

在此先感谢

解决方案

检查此代码，听起来与您正在谈论的完全相同，一个删除形状的按钮

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; 
} 
} 
 
函数setSelection（shape）{
 clearSelection（）; 
 selectedShape = shape; 
 shape.setEditable（true）; 
 selectColor（shape.get（'fillColor'）|| shape.get（'strokeColor'））; 
 
 
函数deleteSelectedShape（）{
 if（selectedShape）{
 selectedShape.setMap（null）; 
 
 
 
 google.maps.event.addListener（drawingManager，'overlaycomplete'，function（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）; 
}）; 
 setSelection（newShape）; 
} 
}）; 
 
 //当绘图模式改变或单击
 //地图时清除当前选择。 
 google.maps.event.addListener（drawingManager，'drawingmode_changed'，clearSelection）; 
 google.maps.event.addListener（地图，'click'，clearSelection）; 
 google.maps.event.addDomListener（document.getElementById（'delete-button'），'click'，deleteSelectedShape）; 
 
 buildColorPalette（）; 
} 
  

I have a user editable google map where users can draw an overlay polygon onto the map using the drawing manager. This works fine and the console logs the lat lngs I need. However, I need to add a button that will clear the map of the polygon so they can draw again if a mistake was made.. My implementation code is pasted below:

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);

   });

There is also a marker on the map, you can ignore this.

Thanks in advance

解决方案

Examine this code, it sounds exactly like what you are talking about, a button to delete the shape

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

Edit: above link is broken but I was able to find that code 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();
  }

这篇关于从谷歌地图drawingManager V3中删除多边形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！