7

我想从地图外部将一个对象拖到我的 Google 地图（API V3）中。经过一番研究，我发现这篇文章很有帮助，并尝试将其调整到我的项目中。

主要思想是在地图上拖动 .png 图像，当鼠标按钮按下时，获取实际坐标并在该 lat / lng 处放置一个标记。

但我注意到拖动图像的点与放置标记的点之间存在差异。无论缩放级别如何，上面链接的示例的差异约为 10 / 15 像素。在最大缩放时，它不是很重要，但是你越放大，差距就越重要。

间隙说明：

  • 在我的网站上，我试图将绿色标记从地图外拖到日内瓦附近的莱曼湖南部：（我们只是在鼠标抬起之前，这仍然是我的 .png 图像）

在地图上拖动 .png

  • 当我将鼠标抬起时，“真实”标记被放在这里：

真实标记的位置

（我们在 100 公里/60 英里的通缉地点...）

那么，为什么会有这样的差距？在我上面链接的示例中，差距不太重要，但它也存在。我的浏览器控制台没有错误，似乎也不是一个棘手的 CSS 问题。
有人知道如何解决这个问题吗？

谢谢

4

1 回答 1

11

标记位置的计算不准确。

  1. 地图的偏移量也必须在计算中使用（当地图没有放在页面的左上角时）
  2. 默认情况下，标记的锚点是 bottom-center ，但脚本只是采用通过事件参数提供的位置，这可能会产生不同的结果，具体取决于您在图像中握住它的点。

固定功能：

$(document).ready(function() {
$("#draggable").draggable({helper: 'clone',
stop: function(e,ui) {
    var mOffset=$($map.getDiv()).offset();
    var point=new google.maps.Point(
        ui.offset.left-mOffset.left+(ui.helper.width()/2),
        ui.offset.top-mOffset.top+(ui.helper.height())
    );
    var ll=overlay.getProjection().fromContainerPixelToLatLng(point);
    placeMarker(ll);
    }
});
});
于 2013-09-20T09:59:51.383 回答