拖动;从地图外部将对象放入Google地图：标记未放入正确的纬度/经度

Question

我想从地图外部将对象拖到我的Google地图（API V3）中。 经过一些研究，我找到了this very helpful post，我试着让它适应我的项目。

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

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

差距的说明：

• 在我的网站上，我试图将绿色标记从地图外拖到日内瓦附近的Leman湖以南:(我们只是在鼠标上方，这仍然是我的.png图像）

• 当我向上鼠标时，“真实”标记放在这里：

（我们距离想要的地方100公里/ 60英里......）

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

谢谢

Answer 1

标记位置的计算并不精确。

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

固定功能：

$(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);
    }
});
});