Google Maps APIクリックリスナーにドラッグを認識させる方法

Question

Googleマップで編集可能なポリゴンを作成しようとしていますが、そのポリゴンのジオ座標を返します。次のJS Fiddleでは、三角形を作成してポイントの1つをドラッグすると、イベントリスナーはクリックを取得しません。もちろん、ポイントをもう一度クリックすると認識されます。

ポリゴンのイベントをドラッグするためのGoogleマップにイベントリスナーを追加する方法はありますか？

http://jsfiddle.net/mclean25/pnc4ttb0/5/

HTML

<div id="map_canvas" style="width:500px; height:450px;"></div> 
<textarea height="100" wid name="vertices" value="" id="vertices" ></textarea> 

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){ 
     overlayClickListener(event.overlay); 
     var values = event.overlay.getPath().getArray(); 
     for (var i = 0; i < values.length; i++){ 
      //console.log("lat:", values[i].lat()); 
      //console.log("lng:", values[i].lng()); 
     } 
     $('#vertices').val(event.overlay.getPath().getArray()); 
    }); 
} 

function overlayClickListener(overlay) { 
    google.maps.event.addDomListener(overlay, "click", function(event){ 
     console.log("Changing this guy!"); 
    $('#vertices').val(overlay.getPath().getArray()); 
    }); 

} 
initialize(); 

$(function(){ 
    $('#save').click(function(){ 

     //iterate polygon vertices? 
    }); 
}); 

Answer 1

あなたは、多角形の頂点の変更をキャプチャしたい場合は、多角形の経路上にイベントリスナーを設定する必要があります。シンプルなポリゴンの場合（のパスが1つしかない、何の穴、描画マネージャで簡単に作成できます唯一のものは）、これは動作しません：

var overlay; 
google.maps.event.addListener(drawingManager, "overlaycomplete", function(event) { 
    $('#vertices').val(event.overlay.getPath().getArray()); 
    overlay = event.overlay; // save a reference to the polygon 
    // new vertex listener 
    google.maps.event.addListener(event.overlay.getPath(), 'insert_at', getCoordinates); 
    // move vertex listener 
    google.maps.event.addListener(event.overlay.getPath(), 'set_at', getCoordinates); 
}); 
function getCoordinates(index, element) { 
    $('#vertices').val(overlay.getPath().getArray()); 
} 

関連質問：Event handler for editing a Google Maps Polyline?

コードスニペット：

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; 
 
var overlay; 
 

 

 
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) { 
 
    google.maps.event.addListener(event.overlay, 'click', function(evt) { 
 
     overlay = this; 
 
     getCoordinates(); 
 
    }) 
 

 
    $('#vertices').val(event.overlay.getPath().getArray()); 
 
    overlay = event.overlay; 
 
    google.maps.event.addListener(event.overlay.getPath(), 'insert_at', getCoordinates); 
 
    google.maps.event.addListener(event.overlay.getPath(), 'remove_at', getCoordinates); 
 
    google.maps.event.addListener(event.overlay.getPath(), 'set_at', getCoordinates); 
 
    }); 
 
} 
 

 
function getCoordinates(index, element) { 
 
    $('#vertices').val(overlay.getPath().getArray()); 
 
} 
 

 
function overlayClickListener(overlay) { 
 
    google.maps.event.addListener(overlay, "click", function(event) { 
 
    console.log("Changing this guy!"); 
 
    overlay = this; 
 
    $('#vertices').val(overlay.getPath().getArray()); 
 
    }); 
 
} 
 
initialize(); 
 

 
$(function() { 
 
    $('#save').click(function() { 
 

 
    //iterate polygon vertices? 
 
    }); 
 
});

#vertices { 
 
    height: 100px; 
 
    width: 500px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://maps.google.com/maps/api/js?libraries=drawing"></script> 
 
<div id="map_canvas" style="width:500px; height:450px;"></div> 
 
<textarea name="vertices" value="" id="vertices"></textarea>

Answer 2

ポリゴン上のdragイベントがあります。それはgoogle.maps.event.addListenerではなく、google.maps.event.addDomListenerを使用して添付する必要があります。ポリゴンイベントの詳細here in the docs（スクロールをEventsまで下げる）

これは動作します：

function overlayClickListener(overlay) { 
    google.maps.event.addListener(overlay, "drag", function(event){ 
     console.log("Changing this guy!"); 
     $('#vertices').val(overlay.getPath().getArray()); 
    }); 
}