drawingManagerポリゴンパスを抽出するGoogle Maps on click

Question

私は描画マネージャを使用してGoogleマップを作成しています。ここでユーザーはポリゴンを描画してそのデータをデータベースに保存できます。 overlaycompleteイベントのイベントリスナーをdrawingManagerオブジェクトに追加しました。イベントが発生すると、ポリゴンの座標が非表示のフィールドに書き込まれます。これは素晴らしいです - 唯一の問題は、個々の頂点がそのポイントの後でドラッグ/変更された場合にイベントが発生しないことです。私は（いずれかの）変更時にフィールドを更新するか、ユーザーが投稿をヒットして非表示フィールドに書き込むときにポリゴン頂点を反復する必要があります。私はかなりこの作業を取得する方法を見つけ出すことはできませんが、私は今のところここにあるものを見ることができます。http://jsfiddle.net/5Y4WT/21/

HTML：

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

はJavaScript：

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) { 
       $('#vertices').val(event.overlay.getPath().getArray()); 
      }); 
     } 
initialize(); 

$(function(){ 
    $('#save').click(function(){ 
     //iterate polygon vertices? 
    }); 
}); 

Answer 1

それを実感してください！

は、私は、関数overlayClickListener追加：

function overlayClickListener(overlay) { 
    google.maps.event.addListener(overlay, "mouseup", function(event){ 
     $('#vertices').val(overlay.getPath().getArray()); 
    }); 
} 

をしてoverlaycomplete上のオーバーレイにそれを添付：アクション内の溶液のために

google.maps.event.addListener(drawingManager, "overlaycomplete", function(event){ 
       overlayClickListener(event.overlay); 
       $('#vertices').val(event.overlay.getPath().getArray()); 
      }); 

、ここを参照してください：あなたはhttp://jsfiddle.net/rvsMH/1/