谷歌地图 - 获取拖动标记的坐标答案

【问题标题】：google maps - get the coordinates of a dragged marker谷歌地图 - 获取拖动标记的坐标
【发布时间】：2011-01-04 14:05:16
【问题描述】：

我正在使用这个出色的 jquery 插件来处理谷歌地图：

http://googlemaps.mayzes.org/

我正在使用“地图标记拖动”示例。

拖动标记后，如何获取标记的新坐标/当前坐标？

谢谢

【问题讨论】：

我在这个插件中没有看到任何事件绑定。我建议使用 google api 而不是插件，因为 api 同样易于使用。而且这个插件使用旧的 v2 api并已弃用。您应该迁移到 google maps javascript api v3。

标签： javascript jquery google-maps

【解决方案1】：

我写了一个项目就是这样做的，它使用 Google Maps API 的第 2 版。这是制作可拖动标记的代码的 sn-p，在您将其拖动到地图上的新位置后，该标记将显示纬度/经度：

            function createMarker(latlng, number, html) {
                var marker = new GMarker(latlng, {draggable: true});
                marker.value = number;
                    var myHtml = html;
                    var center = marker.getLatLng();
                    map.openInfoWindowHtml(latlng, "<font color=black>" + myHtml + "<br>" + center.toString() + "</font>");
                GEvent.addListener(marker, "dragstart", function() {
                    map.closeInfoWindow();
                });
                GEvent.addListener(marker, "dragend", function() {
                    var center = marker.getLatLng();
                    marker.openInfoWindowHtml("<font color=black>" + myHtml + "<br>" + center.toString() + "</font>");
                });
                return marker;
            }

【讨论】：

这个答案不相关，因为问题不是在谷歌地图 api 上寻求帮助。
不是直接的。但上述脚本使用 Google Maps API。并且在这篇文章中解释了做他想做的最简单的方法。

【解决方案2】：

使用 javascript 和谷歌地图 API 尝试这样的事情：

// update element with latest lat and lon
function updateMarkerPosition(latLng) {
  document.getElementById('ll').value = [
    latLng.lat(),
    latLng.lng()
  ].join(', ');
}

function initialize() {
  // look for any lat lon in url, to set map center
  if ($.urlParam('ll')) {
    var llparam = $.urlParam('ll').split(', ');
    var lat = parseFloat(llparam[0]);
    var lon = parseFloat(llparam[1]);
    var latLng = new google.maps.LatLng(lat, lon);
  } else {
    var latLng = new google.maps.LatLng(47.65130629733119, -122.34994607543945);
  }

  var map = new google.maps.Map(document.getElementById('mapCanvas'), {
    zoom: 12,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var marker = new google.maps.Marker({
    position: latLng,
    map: map,
    draggable: true
  });

  // Update current position info.
  updateMarkerPosition(latLng);

  // Add dragging event listeners.

  google.maps.event.addListener(marker, 'drag', function() {
    updateMarkerPosition(marker.getPosition());
  });
}

【讨论】：

【解决方案3】：

您可以访问标记 .latLng() 以获取任何标记的坐标。

【讨论】：