- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有三个不同的按钮来绘制形状。单击每个按钮,应启用独占绘图选项,并禁用其他选项。
我的代码如下。
drawShape.js 文件
以下是我的 Javascript 代码。我有三种不同的方法来绘制形状(圆形、矩形、多边形)。通过下面的代码,每次点击我都会得到新的绘图 Controller 。请我纠正它。
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&libraries=drawing,geometry&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>
最佳答案
通过以下代码完成。
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 - 如何启用和禁用 Google map 中的drawingControlOptions?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20852361/
我想知道如何首先检测 Javascript 是否启用/禁用。在此站点上禁用 javascript 表明 stackoverflow 使用了称为标签的东西。 这是标准的做法吗?它适用于所有浏览器吗?它不
这个问题在这里已经有了答案: 关闭 11 年前。 Possible Duplicate: How to enable PHP short tags ? Enable short open tags
在 VSTS (Azure DevOps) 上拥有私有(private)存储库我尝试通过将以下内容添加到 .csproj 文件来启用 SourceLink:https://github.com/dot
我创建了一个 wx.Frame(我们称之为 mainFrame)。该框架上包含一个按钮,当单击该按钮时,会创建一个新框架(我们称之为 childFrame)。 我想知道如何在创建 childFrame
当我禁用 WPF 中的控件时,比如说一个菜单项 MenuItem aMenuItem = ... aMenuItem.IsEnabled = false; MenuItem 中的文本仍然处于事件状态,
我想在我的 nginx 服务器上启用 gzip 压缩。 nginx.conf 文件在这里: http { # Enable Gzip server { location ~* \.(?
我正在使用免费的 heroku 附加 PG 备份并遵循这些 instructions .我找到了安装应用程序的命令:heroku addons:add pgbackups:auto-week。但是我想
我想知道脚本是否可以使用某种切换按钮启用/禁用页面上的所有输入元素。 我用谷歌搜索了它,但除了这个之外没有发现任何有用的东西: http://www.codetoad.com/javascript/e
在我的 php 文件中,我想使用 jQuery Datepicker。 当我的文件加载时,我创建了禁用的日期选择器。 然后,当我的 php 文件(它是一个表单)中的一个特殊字段被填充时,我想启用日期选
我有一个按钮,如下所示: RadButton lnkAdd = new RadButton(); lnkAdd.ID = "BtnAdd"; lnkAdd.CommandName = RadGrid.
public static void ToggleTaskManager(string keyValue) { RegistryKey objRegistryK
我正在 Azure 中使用事件网格订阅,该订阅在创建 Blob 时触发。然而,我们有很多文件进入这个 blob,比如说 1000 多个。 如果我发现任何文件有任何错误,我想做的是禁用事件订阅。 最佳答
我的网站上有几个使用 HTML5 contentEditable 属性的 div。目标是让用户能够开始编写日记条目,并将保存按钮从禁用更改为启用。 这是我目前拥有的 HTML: Write
我有一个范围输入,其定义如下: @Html.LabelFor(m => Model.Quality, Resources.CompressionQuality) 和一个下拉菜单: @Html.Lab
我正在尝试创建一个启用/禁用按钮的下拉菜单,并且我正在关注此 example 但它已经有 4 年历史了,而且该功能似乎无法在我的 xhtml 页面上运行。 任何帮助都将被适当 最佳答案 这是一个现场演
我正在 Azure 中使用事件网格订阅,该订阅在创建 Blob 时触发。然而,我们有很多文件进入这个 blob,比如说 1000 多个。 如果我发现任何文件有任何错误,我想做的是禁用事件订阅。 最佳答
我在这里遇到一个非常奇怪的情况:我编写了一个应用程序,除其他外,将连接的代理从打开切换到关闭,反之亦然。通过更改注册表中的值来完成此操作: public void SetUpProxy(string
我需要调整一堆 PVC 的大小。似乎最简单的方法是通过ExpandPersistentVolumes 功能。但是我无法获得配置合作。 ExpandPersistentVolumes feature g
如果我的TextField为空,则应禁用该按钮,并且该按钮的textColor和borderColor应该为灰色。但是,启用按钮后,颜色应为蓝色。 更改textColor很容易: button.Set
您好,我的问题是:我无法从另一个类启用表单的按钮。我的表单类是 public class FileSending { //Function for enabling the button
我是一名优秀的程序员,十分优秀!