在Google Maps V3中编辑标记的纬度

Question

我正在使用Google Map DrawingManager将标记添加到地图。 添加标记后，它还会在地图下方的表中添加一列。 此列包含有关标记的一些信息（标题，描述，经纬度，lng）和2个链接（编辑和删除）。 您可以在这张照片上看到。

用户可以单击delete以删除标记，然后单击edit以编辑标记的信息。 我已经完成了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"> 

这是我的小提琴

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