Question

我最近意识到OSM地图中的一个错误：

如果移动了地图div，则地图点击事件似乎在错误的坐标处触发。我将如何解决这个问题？我不能保证地图div是固定的，因为在显示地图时网站的内容可能会发生变化。

据我搜索谷歌和堆栈溢出，我似乎是唯一遇到这个问题的人......

(set a pointer => click "clickme" => try to set a pointer again)

即使是小提琴的简单设置

<div id="clickme">clickme</div>
<div id="mapdiv"></div>

使用js

$("#clickme").click(function(){
    $(this).css("height","200px");
});

将重现错误。

也很奇怪的是，如果你点击clickme然后使用滚动条向下移动，错误就会消失（强硬只会发生在小提琴中，我已经尝试在网站中重现这种行为......）< / p>

[EDIT]解决方案，比未知的答案更加笼统，但基于它...以防其他人偶然发现类似的问题：

setInterval(function(){
    //map container jQuery object...
    var o = jQuery(map.div);

    if(lastPos == null) lastPos = o.position(); //initally set values
    if(lastOff == null) lastOff = o.offset();

    //body or whatever div is scrollable, containing the map div
    if(lastScroll == null) lastScroll = jQuery("body").scrollTop(); 

    var newPos = o.position(); //getting values at this time
    var newOff = o.position();

    var newScroll = jQuery("body").scrollTop();

    if(lastPos.top != newPos.top || 
        lastPos.left != newPos.left ||
        lastOff.top != newOff.top || 
        lastOff.left != newOff.left || 
        lastScroll != newScroll){

        //if one of the values has changed, the map needs to be updated
        map.updateSize();                               
    }

    //reset values for next run
    lastPos = newPos;
    lastOff = newOff;
    lastScroll = newScroll;
},200); //the smaller, the more computing, the bigger the more delay between changes and the map update

Answer 1

您需要使用API updateSize更新地图大小。试试这个：

$("#clickme").click(function(){
    $(this).css("height","200px");
    map.updateSize();
});

<强> DEMO

移动容器后的OpenStreetMap Click事件

1 个答案: