google-maps - 从 map 外拖放一个对象到谷歌地图: marker not put at correct latitude/longitude

Question

我想从 map 外部将一个对象拖到我的 Google map (API V3)中。
经过一番研究，我发现this very helpful post我试图让它适应我的项目。
主要思想是在 map 上拖动 .png 图像，当鼠标按钮按下时，获取实际坐标并在该纬度/经度处放置一个标记。
但我注意到拖动图像的点和放置标记的点之间存在差异。无论缩放级别如何，上面链接的示例的差异约为 10/15 像素。在最大缩放时，它不是很重要，但是您越放大，差距就越重要。

间隙说明:

在我的网站上，我试图将绿色标记从 map 外拖到日内瓦附近的莱曼湖南部:(我们刚刚在鼠标升起之前，这仍然是我的 .png 图像)

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

(我们在 100 公里/60 英里的通缉地点...)

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

谢谢

Answer 1

标记位置的计算不准确。

map 的偏移量也必须在计算中使用(本地图没有放在页面的左上角时)

默认情况下，标记的 anchor 是 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);
    }
});
});