Google地图绘制管理器限制为1个多边形 [英] Google Maps Drawing Manager limit to 1 polygon

查看：99
本文介绍了Google地图绘制管理器限制为1个多边形的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在用google maps v3 API创建地图。使用绘图管理器绘制形状。在绘制了1个多边形之后，是否有办法禁用多边形按钮？我一直在阅读通过API，但无法找到任何事件的多边形启动，只为polygoncomplete。



也许一种检测绘图模式更改的方法？或删除google.maps.drawing.OverlayType.POLYGON，但如果当前多边形被删除，将其放回？

解决方案

文档。


  1. 从本示例的开始。


  2. 隐藏polygoncomplete事件中的绘图控件 

      drawingManager.setOptions（{
     drawingControl：false 
    }）;


  3. 在deleteSelectedShape函数中添加绘图控件

      drawingManager.setOptions（{
     drawingControl：true 
    }）;


  4. 配置drawingManager只添加多边形

      drawingControlOptions：{
     drawingModes：[
     google.maps.drawing.OverlayType.POLYGON 
    ] 
    }，


工作示例

代码段：



var drawingManager; var selectedShape; var colors = ['＃1E90FF'，'＃FF1493'，' ＃32CD32'，'＃FF8C00'，'＃4B0082']; var selectedColor; var colorButtons = {}; function clearSelection（）{if（selectedShape）{selectedShape.setEditable（false）; selectedShape = null; }} function setSelection（shape）{clearSelection（）; selectedShape = shape; shape.setEditable（真）; selectColor（shape.get（'fillColor'）|| shape.get（'strokeColor'））;} function deleteSelectedShape（）{if（selectedShape）{selectedShape.setMap（null）; //显示：drawingManager.setOptions（{drawingControl：true}）; }} function selectColor（color）{selectedColor = color; for（var i = 0; i< colors.length; ++ i）{var currColor = colors [i]; colorButtons [currColor] .style.border = currColor == color？ '2px solid＃789'：'2px solid #fff'; } //从绘图管理器中检索当前选项并根据需要替换//笔划或填充颜色。 var polylineOptions = drawingManager.get（'polylineOptions'）; polylineOptions.strokeColor = color; drawingManager.set（'polylineOptions'，polylineOptions）; var rectangleOptions = drawingManager.get（'rectangleOptions'）; rectangleOptions.fillColor = color; drawingManager.set（'rectangleOptions'，rectangleOptions）; var circleOptions = drawingManager.get（'circleOptions'）; circleOptions.fillColor = color; drawingManager.set（'circleOptions'，circleOptions）; var polygonOptions = drawingManager.get（'polygonOptions'）; polygonOptions.fillColor = color; drawingManager.set（'polygonOptions'，polygonOptions）;} function setSelectedShapeColor（color）{if（selectedShape）{if（selectedShape.type == google.maps.drawing.OverlayType.POLYLINE）{selectedShape.set（'strokeColor'，color ）; } else {selectedShape.set（'fillColor'，color）; }}}函数makeColorButton（color）{var button = document.createElement（'span'）; button.className ='color-button'; button.style.backgroundColor = color; google.maps.event.addDomListener（button，'click'，function（）{selectColor（color）; setSelectedShapeColor（color）;}）;返回按钮;}函数buildColorPalette（）{var colorPalette = document.getElementById（'color-palette'）; for（var i = 0; i< colors.length; ++ i）{var currColor = colors [i]; var colorButton = makeColorButton（currColor）; colorPalette.appendChild（colorButton）; colorButtons [currColor] = colorButton; }} selectColor（colors [0]）;} function initialize（）{var map = new google.maps.Map（document.getElementById（'map'），{zoom：10，center：new google.maps.LatLng（22.344， 114.048），mapTypeId：google.maps.MapTypeId.ROADMAP，disableDefaultUI：true，zoomControl：true}）; var polyOptions = {strokeWeight：0，fillOpacity：0.45，editable：true}; //创建一个附加到地图的绘图管理器，允许用户绘制标记，线条和形状。 drawingManager = new google.maps.drawing.DrawingManager（{drawingMode：google.maps.drawing.OverlayType.POLYGON，drawingControlOptions：{drawingModes：[google.maps.drawing.OverlayType.POLYGON]}，markerOptions：{draggable：true}， polylineOptions：{editable：true}，rectangleOptions：polyOptions，circleOptions：polyOptions，polygonOptions：polyOptions，map：map}）; google.maps.event.addListener（drawingManager，'overlaycomplete'，function（event）{if（event.type == google.maps.drawing.OverlayType.CIRCLE）{var radius = event.overlay.getRadius（）;}} ）; google.maps.event.addListener（drawingManager，'overlaycomplete'，function（e）{if（e.type！= google.maps.drawing.OverlayType.MARKER）{//绘制形状后切换回非绘图模式。drawingManager.setDrawingMode（null）; //隐藏：drawingManager.setOptions（{drawingControl：false}）; //添加一个事件侦听器，当用户将鼠标放在它上面时，选择新绘制的形状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（）;} google.maps.event.addDomListener（window，'load'，initialize）; 

 ＃map，html，body {padding：0;保证金：0; height：100％;}＃panel {width：200px; font-family：Arial，sans-serif; font-size：13px; float：right; margin：10px;}＃color-palette {clear：both;}。color-button {width：14px;身高：14px; font-size：0; margin：2px;向左飘浮; cursor：pointer;}＃delete-button {margin-top：5px;}  

 < script src =http://maps.google.com/maps/api/js?sensor=false&libraries=drawing>< / script>< div id =panel > < div id =color-palette>< / div> < DIV> < button id =delete-button>删除所选形状< / button> < / div>< / div>< div id =map>< / div>


I am creating a map with the google maps v3 API. Using the drawing manager to draw shapes. Is there a way to disable the polygon button after 1 polygon has been drawn? I been reading thru the API but can't find any events for polygon start, only for polygoncomplete.

Maybe a way to detect drawingmode change? or remove google.maps.drawing.OverlayType.POLYGON but put it back if the current polygon was deleted?

解决方案

documentation.

  1. Start from this sample.

  2. hide the drawing control in the polygoncomplete event

        drawingManager.setOptions({
      drawingControl: false
    });

  3. add the drawing control in the deleteSelectedShape function

      drawingManager.setOptions({
   drawingControl: true
 });

  4. configure the drawingManager to only add polygons

      drawingControlOptions: {
    drawingModes: [
      google.maps.drawing.OverlayType.POLYGON
    ]
  },

working example

code snippet:

var drawingManager;
var selectedShape;
var colors = ['#1E90FF', '#FF1493', '#32CD32', '#FF8C00', '#4B0082'];
var selectedColor;
var colorButtons = {};

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);
    // To show:
    drawingManager.setOptions({
      drawingControl: true
    });
  }
}

function selectColor(color) {
  selectedColor = color;
  for (var i = 0; i < colors.length; ++i) {
    var currColor = colors[i];
    colorButtons[currColor].style.border = currColor == color ? '2px solid #789' : '2px solid #fff';
  }

  // Retrieves the current options from the drawing manager and replaces the
  // stroke or fill color as appropriate.
  var polylineOptions = drawingManager.get('polylineOptions');
  polylineOptions.strokeColor = color;
  drawingManager.set('polylineOptions', polylineOptions);

  var rectangleOptions = drawingManager.get('rectangleOptions');
  rectangleOptions.fillColor = color;
  drawingManager.set('rectangleOptions', rectangleOptions);

  var circleOptions = drawingManager.get('circleOptions');
  circleOptions.fillColor = color;
  drawingManager.set('circleOptions', circleOptions);

  var polygonOptions = drawingManager.get('polygonOptions');
  polygonOptions.fillColor = color;
  drawingManager.set('polygonOptions', polygonOptions);
}

function setSelectedShapeColor(color) {
  if (selectedShape) {
    if (selectedShape.type == google.maps.drawing.OverlayType.POLYLINE) {
      selectedShape.set('strokeColor', color);
    } else {
      selectedShape.set('fillColor', color);
    }
  }
}

function makeColorButton(color) {
  var button = document.createElement('span');
  button.className = 'color-button';
  button.style.backgroundColor = color;
  google.maps.event.addDomListener(button, 'click', function() {
    selectColor(color);
    setSelectedShapeColor(color);
  });

  return button;
}

function buildColorPalette() {
  var colorPalette = document.getElementById('color-palette');
  for (var i = 0; i < colors.length; ++i) {
    var currColor = colors[i];
    var colorButton = makeColorButton(currColor);
    colorPalette.appendChild(colorButton);
    colorButtons[currColor] = colorButton;
  }
  selectColor(colors[0]);
}

function initialize() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: new google.maps.LatLng(22.344, 114.048),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI: true,
    zoomControl: true
  });

  var polyOptions = {
    strokeWeight: 0,
    fillOpacity: 0.45,
    editable: true
  };
  // Creates a drawing manager attached to the map that allows the user to draw
  // markers, lines, and shapes.
  drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.POLYGON,
    drawingControlOptions: {
      drawingModes: [
        google.maps.drawing.OverlayType.POLYGON
      ]
    },
    markerOptions: {
      draggable: true
    },
    polylineOptions: {
      editable: true
    },
    rectangleOptions: polyOptions,
    circleOptions: polyOptions,
    polygonOptions: polyOptions,
    map: map
  });

  google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
    if (event.type == google.maps.drawing.OverlayType.CIRCLE) {
      var radius = event.overlay.getRadius();
    }
  });
  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);
      // To hide:
      drawingManager.setOptions({
        drawingControl: false
      });

      // 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();
}
google.maps.event.addDomListener(window, 'load', initialize);

#map,
html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}
#panel {
  width: 200px;
  font-family: Arial, sans-serif;
  font-size: 13px;
  float: right;
  margin: 10px;
}
#color-palette {
  clear: both;
}
.color-button {
  width: 14px;
  height: 14px;
  font-size: 0;
  margin: 2px;
  float: left;
  cursor: pointer;
}
#delete-button {
  margin-top: 5px;
}

<script src="http://maps.google.com/maps/api/js?sensor=false&libraries=drawing"></script>
<div id="panel">
  <div id="color-palette"></div>
  <div>
    <button id="delete-button">Delete Selected Shape</button>
  </div>
</div>
<div id="map"></div>

这篇关于Google地图绘制管理器限制为1个多边形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆