GoogleマップV3でマーカーの緯度を編集する

Question

私はマップにマーカーを追加するためにGoogle Map DrawingManagerを使用しています。マーカーが追加されると、マップの下の表にも列が追加されます。この列には、マーカー（タイトル、説明、緯度、lng）と2つのリンク（編集と削除）に関する情報があります。あなたはこの写真でそれを見ることができます。

ユーザーは、マーカーの情報を編集するためのマーカーとeditを削除するためにdeleteをクリックすることができます。私はdeleteの機能を行っていますが、editの機能を行っていません。私はいくつかのソリューションを試しましたが、動作していませんでした。誰にもこれを行うための解決策がありますか？前もって感謝します。

私のソースコード：

var $body = $('body'), 
 
    markers = {}, 
 
    html = '<tr>' + 
 
    '<td><input type="text"></td>' + 
 
    '<td><input type="text"></td>' + 
 
    '<td><input type="text" value="" class="marker-lat"><input type="text" value="" class="marker-lng"></td>' + 
 
    '<td><a href="#" class="edit-marker">Edit</a><a href="#" class="delete-marker">Delete</a></td>' + 
 
    '</tr>'; 
 

 
initMap(); 
 

 
function initMap() { 
 
    var myOptions = { 
 
    center: new google.maps.LatLng(-16.920334, 145.770859), 
 
    zoom: 12, 
 
    }; 
 

 
    var drawingManager = new google.maps.drawing.DrawingManager({ 
 
    drawingControl: false, 
 
    }); 
 

 
    var map = new google.maps.Map($('.map')[0], myOptions); 
 

 
    google.maps.event.addDomListener(drawingManager, 'markercomplete', function(marker) { 
 
    var pos = marker.getPosition(), 
 
     obj = { 
 
     lat: pos.lat(), 
 
     lng: pos.lng() 
 
     }; 
 

 
    $('.marker-table').find('tbody').append(html); 
 
    $('.marker-table').find('.marker-lat:last').val(obj.lat); 
 
    $('.marker-table').find('.marker-lng:last').val(obj.lng); 
 

 
    markers[obj.lat + ':' + obj.lng] = marker; 
 
    }); 
 

 
    google.maps.event.addDomListener(drawingManager, 'polylinecomplete', function(line) { 
 
    var paths = ''; 
 
    path = line.getPath(); 
 
    for (var i = 0; i < path.length; i++) { 
 
     paths += path.getAt(i) + ";"; 
 
    } 
 
    $('.paths').val(paths); 
 
    }); 
 

 
    drawingManager.setMap(map); 
 

 
    $body.on('click', '.add-marker', function() { 
 
    drawingManager.setDrawingMode(google.maps.drawing.OverlayType.MARKER); 
 
    }); 
 

 
    $body.on('click', '.draw-line', function() { 
 
    drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYLINE); 
 
    }); 
 

 
    $body.on('click', '.delete-marker', function(e) { 
 
    var $this = $(this), 
 
     $tr = $this.closest('tr'), 
 
     lng = $tr.find('.marker-lng').val(), 
 
     lat = $tr.find('.marker-lat').val(), 
 
     marker; 
 

 
    e.preventDefault(); 
 

 
    markers[lat + ':' + lng].setMap(null); 
 

 
    $tr.remove(); 
 
    }); 
 

 
    $body.on('click', '.edit-marker', function(e) { 
 
    var $this = $(this); 
 
    e.preventDefault(); 
 
    }); 
 
}

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing"></script><input type="button" value="Add Marker" class="add-marker"> 
 
<input type="button" value="Draw a line" class="draw-line"> 
 
<div class="map" style="width: 600px; height: 200px;"></div> 
 
<table class="marker-table"> 
 
    <thead> 
 
    <tr> 
 
     <th>Title</th> 
 
     <th>Description</th> 
 
     <th></th> 
 
     <th>Action</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody></tbody> 
 
</table> 
 
<input type="text" class="paths" name="paths">

ここでは、私はこれを行うための解決策を見出したmy fiddle

Answer 1

です。

markers[obj.lat + ':' + obj.lng] = marker;をマーカーの格納に使用する代わりに、markers[index] = marker;（インデックスは整数）を使用します。ここで

は私の変化です：

var index = 0; 

google.maps.event.addDomListener(drawingManager, 'markercomplete', function(marker) 
    { 
     var pos = marker.getPosition(); 

     $('.marker-table').find('tbody').append(html); 
     $('.marker-table').find('.marker-lat:last').val(pos.lat()); 
     $('.marker-table').find('.marker-lng:last').val(pos.lng()); 
     $('.marker-table').find('.marker-index:last').val(index);   

     markers[index] = marker; 
     index++; 
    }); 

    $body.on('click', '.edit-marker', function(e) 
    { 
     e.preventDefault(); 

     var $this = $(this), 
      $tr = $this.closest('tr'), 
      latlng = new google.maps.LatLng($tr.find('.marker-lat').val(), $tr.find('.marker-lng').val()); 

     markers[$tr.find('.marker-index').val()].setPosition(latlng); 
    });