Question

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

用户可以点击delete删除标记，然后edit编辑标记的信息。我已完成delete功能但尚未完成edit功能。我尝试了一些解决方案，但他们没有工作。有没有人有任何解决方案呢？提前谢谢。

我的源代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

在Google Maps V3中编辑标记的lat-lng

1 个答案: