javascript - 移动容器后的 OpenStreetMap Click 事件

Question

我最近发现 OSM map 中的一个错误:

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

就我搜索谷歌和堆栈溢出而言，我似乎是唯一遇到该问题的人......

这是一个 fiddle :http://jsfiddle.net/W3f6L/

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

即使是简单的 fiddle 设置

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

用js

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

将重现错误。

同样很奇怪的是，如果您单击 clickme 然后使用滚动条向下移动，错误就会消失(虽然这只发生在 fiddle 中，但我已经尝试在站点中重现此行为...)

[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 更新 map 大小 updateSize .试试这个:

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

DEMO