如何在Google地图中启用和禁用drawingControlOptions？ [英] How to enable and disable the drawingControlOptions in Google Maps?

问题描述

我有三个不同的按钮来绘制形状。点击每个按钮的独占绘图选项应该启用，并且其他选项应该被禁用。
我的代码如下。

drawShape.js文件

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

  google.maps.visualRefresh = true; 
 var rectangles = []; 
 var coordinates = []; 
 var polygons = []; 
 var map; 
 
函数initiateRectangle（）{
 //允许在客户端绘制形状
 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 
] 
} 
}）; 
 //在地图中加载绘制的形状。 
 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（））; 
} 
}）; 
 
 
函数initiateCircle（）{
 //允许在客户端绘制形状
 var drawingManager = new google.maps.drawing.DrawingManager（{
 drawingMode：google.maps.drawing.OverlayType.CIRCLE，
 drawingControl：true，
 drawingControlOptions：{
位置：google.maps.ControlPosition.TOP_CENTER，
 drawingModes： [
 google.maps.drawing.OverlayType.CIRCLE 
] 
} 
}）; 
 //在地图中加载绘制的形状。 
 drawingManager.setMap（map）; 
 
 google.maps.event.addListener（drawRectangle，'overlaycomplete'，function（event）{
 if（event.type == google.maps.drawing.OverlayType.CIRCLE）{
 console.log（Circle Working PERFECTLY）; 
} 
}）; 
 
 
函数initiatePolygon（）{
 //允许在客户端绘制图形
 var drawingManager = new google.maps.drawing.DrawingManager（{
 drawingMode：google.maps.drawing.OverlayType.POLYGON，
 drawingControl：true，
 drawingControlOptions：{
位置：google.maps.ControlPosition.TOP_CENTER，
 drawingModes： [
 google.maps.drawing.OverlayType.POLYGON 
] 
} 
}）; 
 //在地图中加载绘制的形状。 
 drawingManager.setMap（map）; 
 
 google.maps.event.addListener（drawingManager，'polygoncomplete'，function（polygon）{
 drawPolygon（polygon）; 
}）; 
} 
 
函数初始化（）
 {
 //指定google地图属性
 map = new google.maps.Map（document.getElementById 'map-canvas'），{zoom：3，center：new google.maps.LatLng（0,0），mapTypeId：google.maps.MapTypeId.ROADMAP}）; 
 // 
} 
 // 
函数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 // ENhttp://www.w3.org/TR/xhtml1 /DTD/xhtml1-transitional.dtd\"> 
  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：头> 
< title> REGION LOOKUP SYSTEM< / title> 
< meta name =viewportcontent =width = device-width，initial-scale = 1.0，maximum-scale = 1.0，user-scalable = no/> 
< meta http-equiv =content-typecontent =text / html; charset = UTF-8/> 
< script src =https://maps.googleapis.com/maps/api/js?v=3.exp&amp;library=drawing,geometry&amp;sensor=false>< /脚本> 
< / h：头> 
< 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 =buttonStylevalue =Draw Rectangleonclick =initiateRectangle（）>< / h：commandButton> 
< h：commandButton styleClass =buttonStylevalue =绘制多边形onclick =initiatePolygon（）>< / h：commandButton> 
< h：commandButton styleClass =buttonStylevalue =绘制圆onclick =initiateCircle（）>< / h：commandButton> 
< h：commandButton styleClass =buttonStylevalue =删除形状>< / h：commandButton> 
< / div> 
< div id =map-canvasclass =span9>< / div> 
< / div> 
< / div> 
< h：outputStylesheet library =cssname =bootstrap.css>< / h：outputStylesheet> 
 < h：outputStylesheet library =cssname =primefacesoverride.css>< / h：outputStylesheet> 
< h：outputScript library =jsname =drawShape.js>< / h：outputScript> 
< / h：body> 
< / html> 
  

解决方案

通过以下代码完成它。

$ b

JavaScript代码

  var rectangles = []; 
 var coordinates = []; 
 var polygons = []; 
 var map; 
 var drawingTool = new google.maps.drawing.DrawingManager（）; 
函数initiateRectangle（）{
 //允许在客户端绘制图形
 if（drawingTool.getMap（））{
 drawingTool.setMap（null）; //用于禁用Rectangle工具
} 
 drawingTool.setOptions（{
 drawingMode：google.maps.drawing.OverlayType.RECTANGLE，
 drawingControl：true，
 drawingControlOptions：{
 position：google.maps.ControlPosition.TOP_CENTER，
 drawingModes：[google.maps.drawing.OverlayType.RECTANGLE] 
} 
}）; 
 //在地图中加载绘制的形状。 
 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（），事件.overlay.getBounds（）。getSouthWest（）。lng（））; 
} 
}）; 
 
 
函数startingCircle（）{
 //允许在客户端绘制形状
 if（drawingTool.getMap（））{
 drawingTool .setMap（NULL）; //用于禁用圆形工具
} 
 drawingTool.setOptions（{
 drawingMode：google.maps.drawing.OverlayType.CIRCLE，
 drawingControl：true，
 drawingControlOptions：{
 position：google.maps.ControlPosition.TOP_CENTER，
 drawingModes：[google.maps.drawing.OverlayType.CIRCLE] 
} 
}）; 
 //在地图中加载绘制的形状。 
 drawingTool.setMap（map）; 
 
 google.maps.event.addListener（drawingTool，'overlaycomplete'，function（event）{
 if（event.type == google.maps.drawing.OverlayType.CIRCLE）{
 console.log（CIRCLE TRIGGERED）; 
} 
}）; 
 
 $ b函数initiatePolygon（）{
 //允许在客户端绘制形状
 if（drawingTool.getMap（））{
 drawingTool .setMap（NULL）; //用于禁用多边形工具
} 
 drawingTool.setOptions（{
 drawingMode：google.maps.drawing.OverlayType.POLYGON，
 drawingControl：true，
 drawingControlOptions：{
 position：google.maps.ControlPosition.TOP_CENTER，
 drawingModes：[google.maps.drawing.OverlayType.POLYGON] 
} 
}）; 
 //在地图中加载绘制的形状。 
 drawingTool.setMap（map）; 
 
 google.maps.event.addListener（drawingTool，'polygoncomplete'，function（polygon）{
 drawPolygon（polygon）; 
}）; 
} 
 
 function stopDrawing（）{
 drawingTool.setMap（null）; 
} 
 
函数初始化（）
 {
 //指定google地图属性
 map = new google.maps.Map（document.getElementById 'map-canvas'），{zoom：3，center：new google.maps.LatLng（0,0），mapTypeId：google.maps.MapTypeId.ROADMAP}）; 
} 
  

I am having three different buttons for drawing shapes. Clicking each button the exclusive drawing option should be enabled and also the other options should become disabled. My code is following.

drawShape.js File

The following is my Javascript code. I am having three separate methods to draw shapes(circle, rectangle, polygon). By the below code, by each click I am getting new drawing controller. Please me to correct it.

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 FILE :

<!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>

解决方案

Done it by the following code.

JavaScript Code

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地图中启用和禁用drawingControlOptions？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！