如何获取Google地图多边形顶点绘制/插针事件？

Question

我想让用户在多边形内绘制多边形。我可以使用constainsLocation函数获取经纬度（https://developers.google.com/maps/documentation/javascript/examples/poly-containsLocation）但是，当用户绘制多边形时，我想检测用户绘制的点/顶点是否在多边形内。那么当用户绘制多边形时，是否有任何事件检测点击/绘制事件？

\t 
 
var map; // Global declaration of the map 
 
\t \t \t var iw = new google.maps.InfoWindow(); // Global declaration of the infowindow 
 
\t \t \t var lat_longs = new Array(); 
 
\t \t \t var markers = new Array(); 
 
\t \t \t var drawingManager; 
 
\t \t \t function initialize() { 
 
\t \t \t \t var myLatlng = new google.maps.LatLng(40.9403762, -74.1318096); 
 
\t \t \t \t var myOptions = { 
 
\t \t \t \t \t zoom: 13, 
 
\t \t \t \t \t center: myLatlng, 
 
\t \t \t \t \t mapTypeId: google.maps.MapTypeId.ROADMAP} 
 
\t \t \t \t map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
 
\t \t \t \t drawingManager = new google.maps.drawing.DrawingManager({ 
 
\t \t \t \t drawingMode: google.maps.drawing.OverlayType.POLYGON, 
 
    \t \t \t \t drawingControl: true, 
 
    \t \t \t \t drawingControlOptions: { 
 
    \t \t \t \t \t position: google.maps.ControlPosition.TOP_CENTER, 
 
\t \t \t \t \t drawingModes: [google.maps.drawing.OverlayType.POLYGON] 
 
\t \t \t \t }, 
 
\t \t \t \t \t \t polygonOptions: { 
 
\t \t \t \t \t \t \t editable: true 
 
\t \t \t \t \t \t } 
 
\t \t \t }); 
 
\t \t \t drawingManager.setMap(map); 
 
\t \t \t 
 
\t \t \t google.maps.event.addListener(drawingManager, "overlaycomplete", function(event) { 
 
\t \t \t \t var newShape = event.overlay; 
 
\t \t \t \t newShape.type = event.type; 
 
\t \t \t }); 
 

 
      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? 
 
    }); 
 
});

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

当用户绘制第一多边形不是用户不应该能够吸取外面的另一面。有什么事吗？

感谢

Answer 1

您可以使用图管理，使谷歌地图的面积的多边形作为不可编辑外。

一旦用户绘制一个多边形（当你看到用户已经到达他开始的相同点/顶点时），调用该函数将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 
     } 
    }); 
} 

希望能帮到你！