是否可以将Google Maps标记拖放到ListView中? [英] Is it possible to drag Google maps marker and drop it in ListView?

问题描述

我正在尝试从Google Maps Marker捕获数据，并且想知道是否可以将Markers拖到ListView(在链接下方)然后访问(纬度，经度)或地名等数据?

I am trying to catch data from Google Maps Marker, and want to know is it possible to drag Markers to ListView(below link) then access the (lat, lng) or place name etc. data ?

http://imgur.com/l4DKnZu

推荐答案

这里有可能.它不是专门用于Android，但也许有用.

Here is a possibility. It's not specifically Android, but it might be useful, maybe.

因此，当客户端将标记从地图的边界拖动60像素时，地图将开始平移.因此，在那个60像素点，我得到了标记.可以吗?

So, when the client drags the marker 60 pixel from the border of the map, the map starts panning. So, at that 60 pixel point, I get the markers out. Okay for you?

<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"有关的所有内容；只是为了显示正在发生的事情.

When all is operational, remove everything having to do with id="dragged"; it's just to display what's happening.

这篇关于是否可以将Google Maps标记拖放到ListView中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！