是否可以将 Google 地图标记拖放到 ListView 中？

Question

我正在尝试从 Google Maps Marker 捕获数据，并且想知道是否可以将 Markers 拖到 ListView（链接下方）然后访问（lat、lng）或地名等数据？

http://imgur.com/l4DKnZu

Answer 1

这是一种可能性。它不是专门针对 Android 的，但它可能有用，也许。

因此，当客户端将标记拖离地图边界 60 像素时，地图开始平移。所以，在那个 60 像素点，我把标记拿出来。你还好吗？

<style>
  table {
    width: 100px;
    float: right;
    height: 500px;
  }
  table tr {
    height: 20%;
  }
</style>

<table id="mytable" border="1">
  <tr><td id="hello">Hello</td></tr>
  <tr><td id="world">World</td></tr>
  <tr><td id="foo">Foo</td></tr>
  <tr><td id="bar">Bar</td></tr>
</table>
<div id="map" style="height: 500px;"></div>
<input id="dragged"><br>

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var locations = [ // some points in/close to Belgium
  [50,    4],
  [50.5,  4.5],
  [51,    5],
  [51.5,  5.5]
];
var numberOfCels = 4;    // ADAPT to your number of cells !
var markers = [];
function initialize() {
    var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(50.5,  4.5),
        zoom: 7,
        mapTypeId: 'roadmap'
    });
    // generate the markers
    for (var i in locations) {
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][0], locations[i][1]),
        map: map,
        draggable: true,
        title: 'marker ' + i
      });

      google.maps.event.addListener(marker, 'dragend', function() {
        // maybe you want to do something here
      })

      google.maps.event.addListener(marker, 'drag', function() {
        var pixelPosition =  getPixelPosition(this);
        var index = markers.indexOf(this);
        if (pixelPosition.right <= 60) {// Get the marker out of the map
          // get the height
          switch ( Math.floor(numberOfCels * pixelPosition.y / document.getElementById("map").clientHeight ) ) {
            default:
            case 0:
              document.getElementById("hello").innerHTML =  'marker ' + index ;
              break;
            case 1:
              document.getElementById("world").innerHTML =  'marker ' + index ;
              break;
            case 2:
              document.getElementById("foo").innerHTML =  'marker ' + index ;
              break;
            case 3:
              document.getElementById("bar").innerHTML =  'marker ' + index ;
              break;
          }
          // remove the marker from the map
          this.setMap(null);
        }
        document.getElementById("dragged").value = 'x: ' + pixelPosition.x +' - right:'+ pixelPosition.right;
      })
      // store the variable in the array
      markers.push(marker);
    }

    /**
    *  returns how many pixels the marker is from the map
    *  @see https://gist.github.com/keannan5390/3996774  (adapted by me)
    */
    function getPixelPosition (marker) {
      var scale = Math.pow(2, map.getZoom());
      var nw = new google.maps.LatLng(
        map.getBounds().getNorthEast().lat(),
        map.getBounds().getSouthWest().lng()
      );
      var worldCoordinateNW = map.getProjection().fromLatLngToPoint(nw);
      var worldCoordinate = map.getProjection().fromLatLngToPoint(marker.getPosition());
      var pixelOffset = new google.maps.Point(
        Math.floor((worldCoordinate.x - worldCoordinateNW.x) * scale),
        Math.floor((worldCoordinate.y - worldCoordinateNW.y) * scale)
      );
      return {
        x: pixelOffset.x,
        y: pixelOffset.y,
        right:  document.getElementById("map").clientWidth - pixelOffset.x,
        bottom: document.getElementById("map").clientHeight - pixelOffset.y
      };
    }

}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

当一切正常时，删除与 id="dragged"; 相关的所有内容；这只是为了显示正在发生的事情。