Question

我有三个不同的按钮用于绘制形状。单击每个按钮应启用独占绘图选项，并且还应禁用其他选项。我的代码正在关注。

drawShape.js文件

以下是我的Javascript代码。我有三种不同的方法来绘制形状（圆形，矩形，多边形）。通过以下代码，每次点击我都会得到新的绘图控制器。请我纠正。

google.maps.visualRefresh = true;
var rectangles  =   [];
var coordinates = [];
var polygons = [];
var map;

function initiateRectangle(){
    //Allowing to draw shapes in the Client Side
    var drawRectangleTool = new google.maps.drawing.DrawingManager({
        drawingMode: google.maps.drawing.OverlayType.RECTANGLE,
        drawingControl: true,
        drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
                drawingModes: [
                    google.maps.drawing.OverlayType.RECTANGLE
                ]
            }
    });
    //Loading the drawn shape in the Map.
    drawRectangleTool.setMap(map);

    google.maps.event.addListener(drawRectangleTool,'overlaycomplete',function(event) {
        if(event.type   ==  google.maps.drawing.OverlayType.RECTANGLE) {
            drawRectangle(event.overlay.getBounds().getNorthEast().lat(),event.overlay.getBounds().getNorthEast().lng(),event.overlay.getBounds().getSouthWest().lat(),event.overlay.getBounds().getSouthWest().lng());
        }
    });
}

function initiateCircle() {
    //Allowing to draw shapes in the Client Side
    var drawingManager = new google.maps.drawing.DrawingManager({
        drawingMode: google.maps.drawing.OverlayType.CIRCLE,
        drawingControl: true,
        drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
                drawingModes: [
                    google.maps.drawing.OverlayType.CIRCLE
                ]
            }
    });
    //Loading the drawn shape in the Map.
    drawingManager.setMap(map);

    google.maps.event.addListener(drawRectangle,'overlaycomplete',function(event) {
        if(event.type   ==  google.maps.drawing.OverlayType.CIRCLE) {
            console.log("Circle Working PERFECTLY");
        }
    });
}

function initiatePolygon() {
    //Allowing to draw shapes in the Client Side
    var drawingManager = new google.maps.drawing.DrawingManager({
        drawingMode: google.maps.drawing.OverlayType.POLYGON,
        drawingControl: true,
        drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
                drawingModes: [
                    google.maps.drawing.OverlayType.POLYGON
                ]
            }
    });
    //Loading the drawn shape in the Map.
    drawingManager.setMap(map);

    google.maps.event.addListener(drawingManager,'polygoncomplete',function(polygon) {
            drawPolygon(polygon);
    });
}

function initialize()
{
    //Specifies the google Map properties
    map = new google.maps.Map(document.getElementById('map-canvas'), {zoom: 3, center: new google.maps.LatLng(0,0),mapTypeId: google.maps.MapTypeId.ROADMAP});
    //
}
//
function displayInfo(conString,customPosition) {
    var infoWindow =    new google.maps.InfoWindow({
        content : conString,
        position : customPosition
    });
    infoWindow.open(map);
}
google.maps.event.addDomListener(window, 'load', initialize);

index.xhtml文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:p="http://primefaces.org/ui">
<h:head>
    <title> REGION LOOKUP SYSTEM </title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;libraries=drawing,geometry&amp;sensor=false"></script>
</h:head>
<h:body>
    <div class="container-fluid">
        <h3 class="text-center breadcrumb custom-color"> GeoCodeLookUpSystem </h3>
        <div class="row-fluid">
            <div class="span3 leftpanel custom-color">
                <h:commandButton styleClass="buttonStyle" value="Draw Rectangle" onclick="initiateRectangle()"></h:commandButton>
                <h:commandButton styleClass="buttonStyle" value="Draw Polygon" onclick="initiatePolygon()"></h:commandButton>
                <h:commandButton styleClass="buttonStyle" value="Draw Circle" onclick="initiateCircle()"></h:commandButton>
                <h:commandButton styleClass="buttonStyle" value="Delete Shapes"></h:commandButton>
            </div>
            <div id="map-canvas" class="span9"></div>
        </div>
    </div>
    <h:outputStylesheet library="css" name="bootstrap.css"></h:outputStylesheet>
    <h:outputStylesheet library="css" name="customClass.css"></h:outputStylesheet>
    <h:outputStylesheet library="css" name="primefacesoverride.css"></h:outputStylesheet>
    <h:outputScript library="js" name="drawShape.js"></h:outputScript>
</h:body> 
</html>

Answer 1

通过以下代码完成。

JavaScript代码

var rectangles  =   [];
var coordinates = [];
var polygons = [];
var map;
var drawingTool =   new google.maps.drawing.DrawingManager();
function initiateRectangle(){
    //Allowing to draw shapes in the Client Side
    if(drawingTool.getMap()) {
        drawingTool.setMap(null); // Used to disable the Rectangle tool
    }
    drawingTool.setOptions({
        drawingMode : google.maps.drawing.OverlayType.RECTANGLE,
        drawingControl : true,
        drawingControlOptions : {
            position : google.maps.ControlPosition.TOP_CENTER,
            drawingModes : [google.maps.drawing.OverlayType.RECTANGLE]
        }
    });
    //Loading the drawn shape in the Map.
    drawingTool.setMap(map);
    google.maps.event.addListener(drawingTool,'overlaycomplete',function(event) {
        if(event.type   ==  google.maps.drawing.OverlayType.RECTANGLE) {
            drawRectangle(event.overlay.getBounds().getNorthEast().lat(),event.overlay.getBounds().getNorthEast().lng(),event.overlay.getBounds().getSouthWest().lat(),event.overlay.getBounds().getSouthWest().lng());
        }
    });
}

function initiateCircle() {
    //Allowing to draw shapes in the Client Side
    if(drawingTool.getMap()) {
        drawingTool.setMap(null); // Used to disable the Circle tool
    }
    drawingTool.setOptions({
        drawingMode : google.maps.drawing.OverlayType.CIRCLE,
        drawingControl : true,
        drawingControlOptions : {
            position : google.maps.ControlPosition.TOP_CENTER,
            drawingModes : [google.maps.drawing.OverlayType.CIRCLE]
        }
    });
        //Loading the drawn shape in the Map.
    drawingTool.setMap(map);

    google.maps.event.addListener(drawingTool,'overlaycomplete',function(event) {
        if(event.type   ==  google.maps.drawing.OverlayType.CIRCLE) {
            console.log("CIRCLE TRIGGERED");
        }
    });
}

function initiatePolygon() {
    //Allowing to draw shapes in the Client Side
    if(drawingTool.getMap()) {
        drawingTool.setMap(null); // Used to disable the Polygon tool
    }
    drawingTool.setOptions({
        drawingMode : google.maps.drawing.OverlayType.POLYGON,
        drawingControl : true,
        drawingControlOptions : {
            position : google.maps.ControlPosition.TOP_CENTER,
            drawingModes : [google.maps.drawing.OverlayType.POLYGON]
        }
    });
        //Loading the drawn shape in the Map.
    drawingTool.setMap(map);        

    google.maps.event.addListener(drawingTool,'polygoncomplete',function(polygon) {
            drawPolygon(polygon);
    });
}

function stopDrawing() {
    drawingTool.setMap(null);
}

function initialize()
{
    //Specifies the google Map properties
    map = new google.maps.Map(document.getElementById('map-canvas'), {zoom: 3, center: new google.maps.LatLng(0,0),mapTypeId: google.maps.MapTypeId.ROADMAP});  
}

如何启用和禁用Google Maps中的drawingControlOptions？

1 个答案: