将对象拖放到地图外部的Google地图中:标记未放置在正确的纬度/经度处

Question

我想从地图外部将对象拖到Google Map(API V3)中.经过一些研究,我找到了这个非常有用的帖子,我试着让它适应我的项目.

主要思想是在地图上拖动.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);
    }
});
});