Bearbeiten von Marken lat-lng in Google Maps V3

Question

Ich benutze Google Map DrawingManager, um Marker zur Karte hinzuzufügen. Nachdem ein Marker hinzugefügt wurde, fügt er auch eine Spalte in die Tabelle unter der Karte ein. Diese Spalte enthält Informationen über den Marker (Titel, Beschreibung, lat, lng) und 2 Links (Bearbeiten und Löschen). Sie können das auf diesem Foto sehen.

Benutzer können delete klicken, um einen Marker und edit zu entfernen Markierung der Informationen zu bearbeiten. Ich habe delete Funktion getan, aber edit Funktion nicht getan. Ich habe ein paar Lösungen ausprobiert, aber sie haben nicht funktioniert. Hat jemand eine Lösung, dies zu tun? Danke im Voraus.

Mein Quellcode:

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

Hier ist my fiddle

Answer 1

Ich habe eine Lösung, dies zu tun herausgefunden.

Anstatt markers[obj.lat + ':' + obj.lng] = marker; zum Speichern von Markern zu verwenden, verwende ich markers[index] = marker; (Index ist eine ganze Zahl).

Hier ist meine Änderung:

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