Question

我想允许用户在多边形内绘制多边形。我可以使用constainsLocation函数（https://developers.google.com/maps/documentation/javascript/examples/poly-containsLocation）得到lat / long但是当用户绘制多边形时，我想检测用户绘制的点/顶点是否在多边形内。因此，当用户绘制多边形时，是否有任何事件可以检测点击/绘制事件？

＆＃13;

	
var map; // Global declaration of the map
			var iw = new google.maps.InfoWindow(); // Global declaration of the infowindow
			var lat_longs = new Array();
			var markers = new Array();
			var drawingManager;
			function initialize() {
				 var myLatlng = new google.maps.LatLng(40.9403762, -74.1318096);
				var myOptions = {
			  		zoom: 13,
					center: myLatlng,
			  		mapTypeId: google.maps.MapTypeId.ROADMAP}
				map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
				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]
				},
						polygonOptions: {
							editable: true
						}
			});
			drawingManager.setMap(map);
			
			google.maps.event.addListener(drawingManager, "overlaycomplete", function(event) {
				var newShape = event.overlay;
				newShape.type = event.type;
			});

            google.maps.event.addListener(drawingManager, "overlaycomplete", function(event){
                overlayClickListener(event.overlay);
                $('#vertices').val(event.overlay.getPath().getArray());
            });
        }
function overlayClickListener(overlay) {
    alert('hello');
    google.maps.event.addListener(overlay, "mouseup", function(event){
        $('#vertices').val(overlay.getPath().getArray());
        
    });
}
 initialize();

$(function(){
    $('#save').click(function(){
        //iterate polygon vertices?
    });
});

＆＃13;

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false&libraries=drawing&dummy=.js"></script>
<div id="map_canvas" style="width:500px; height:450px;"></div>
<form method="post" accept-charset="utf-8" id="map_form">
    <input type="text" name="vertices" value="" id="vertices"  />
    <input type="button" name="save" value="Save!" id="save"  />
</form>

＆＃13;

当用户绘制第一个多边形时，用户不应该在其外部绘制另一个多边形。有什么事吗？

由于

Answer 1

您可以使用图纸管理器将多边形外的Google地图区域设为不可编辑区域。

一旦用户绘制多边形（当您看到用户已经从他开始的位置到达相同的点/顶点时），请调用此函数以使Google Map的其余区域不可编辑。

$('#showRes').click(function(){
    drawingManager.setDrawingMode(null);
    drawingManager.setOptions({ 
        polygonOptions: {
            paths: pathArr,
            strokeWeight: 2,
            fillOpacity: 0.2,
            editable: false,
            fillColor: '#FF0000',
            strokeColor: '#FF0000',
            geodesic: true,
            suppressUndo: true
        }
    });
}

希望有助于!!

如何获取谷歌地图多边形顶点绘制/引脚事件？

1 个答案: