Question

我试图在绘制圆圈之后离开模式绘图，我想隐藏控件绘图管理器并且可以编辑圆圈但我不知道如何绘制圆圈后进入模式，不要t绘制并可以编辑圆圈

<script type="text/javascript">
    function initialize() {

        var mapOptions = {
          center: new google.maps.LatLng(4.705, -74.113),
          zoom: 5,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        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.CIRCLE,
                  google.maps.drawing.OverlayType.POLYGON,
                  //google.maps.drawing.OverlayType.POLYLINE,
                  //google.maps.drawing.OverlayType.RECTANGLE
                ]
            },
            //markerOptions: {icon: 'Images/marker_sprite.png'},

            circleOptions: {
                strokeColor: '#FF0000',
                fillColor: '#DF0101',
                fillOpacity: 0.3,
                strokeWeight: 2,
                editable:true
            },
            rectangleOptions: {
                  strokeColor: "#FF0000",
                  strokeWeight: 2,
                  fillColor: '#DF0101',
                  fillOpacity: 0.35,
                  editable:true
            },
            polygonOptions: {
                  strokeColor: "#FF0000",
                  strokeWeight: 2,
                  fillColor: '#DF0101',
                  fillOpacity: 0.35,
                  editable:true
            }  

        });// Cierre variable drawingManager

        drawingManager.setMap(map);

        // event handler for drawingManager shapes
        function setClickEvent(shape) {
             google.maps.event.addListener(shape, 'click', function(){
                //Colocar mensaje en Formato Dialgo UI
                if(confirm('Desea Eliminar El Punto de Control')){                      
                    shape.setMap(null);
                    drawingManager.setOptions({
                    drawingMode: google.maps.drawing.OverlayType.MARKER,
                    drawingControl: true,
                    drawingControlOptions: {
                        position: google.maps.ControlPosition.TOP_CENTER,
                        drawingModes: [
                            google.maps.drawing.OverlayType.CIRCLE,
                            google.maps.drawing.OverlayType.POLYGON
                        ]
                      }
                    });
                }
            });
        }

        google.maps.event.addListener(drawingManager,'circlecomplete', function(circle){
            radius = circle.getRadius();
            centro = circle.getCenter();
            document.getElementById("posicion").innerHTML=centro;
            document.getElementById("radio").innerHTML=radius;

            drawingManager.setOptions({
              drawingControl: false
            });

            google.maps.event.addListener(circle, 'radius_changed', function(){
                radius = circle.getRadius();
                document.getElementById("radio").innerHTML=radius;
            });

            google.maps.event.addListener(circle, 'center_changed', function(){
                centro = circle.getCenter();
                document.getElementById("posicion").innerHTML=centro;

            });

            //drawingManager.setOptions({ drawingControl: false });

            setClickEvent(circle);
        });
        /*

        google.maps.event.addListener(drawingManager, 'rectanglecomplete', function(Rectangle) {
            var vertices = Rectangle.getBounds();
            document.getElementById("posicion").innerHTML=vertices;

            setClickEvent(Rectangle);
        });
        */

        google.maps.event.addListener(drawingManager, 'polygoncomplete', function(Polygon) {
            var vertices = Polygon.getPath();
            var pocision="";
            for (var i=0; i < vertices.length; i++){
                var xy=vertices.getAt(i);
                pocision += "<br>"+ xy.lng() +" , " + xy.lat();
                document.getElementById("posicion").innerHTML=pocision;
            }

            google.maps.event.addListener(Polygon, 'mousedown', function() {
                google.maps.event.addListener(Polygon.getPath(), 'set_at', function() {
                    console.log('editando');
                    vertices=Polygon.getPath();
                    pocision="";
                    for (var i=0; i < vertices.length; i++){
                        var xy=vertices.getAt(i);
                        pocision += "<br>"+ xy.lng() +" , " + xy.lat();
                        document.getElementById("posicion_Final").innerHTML=pocision;
                    }
                });

            });


        });     


   }/* cierra  inittalize() */

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

</script>

Answer 1

要使圆圈无法编辑，请将editable选项设置为false：

    google.maps.event.addListener(drawingManager,'circlecomplete', function(circle){
        radius = circle.getRadius();
        centro = circle.getCenter();
        document.getElementById("posicion").innerHTML=centro;
        document.getElementById("radio").innerHTML=radius;

        circle.setOptions({editable:false}); // <-- **** add this line
        drawingManager.setOptions({
          drawingControl: false
        });

        google.maps.event.addListener(circle, 'radius_changed', function(){
            radius = circle.getRadius();
            document.getElementById("radio").innerHTML=radius;
        });

        google.maps.event.addListener(circle, 'center_changed', function(){
            centro = circle.getCenter();
            document.getElementById("posicion").innerHTML=centro;

        });

        setClickEvent(circle);
    });

如何在谷歌地图中绘制圆圈之前离开模式绘图

1 个答案: