OpenLayers在jquery UI对话框中的映射

Question

当我把OpenLayers映射在一个对话框中，缩放轮似乎不工作。此外，当尝试调整对话框的大小时，它不是那么平滑。如何解决这两个问题?

这里是小提琴http://jsfiddle.net/Ja7v2/2/

var div = $('<div />')
            .attr('id', 'map')
            .css({width:800,height:600})
            .appendTo($('body'));
//start a simple map, code from on http://openlayers.org/dev/examples/osm.html
map = new OpenLayers.Map( 'map');
layer = new OpenLayers.Layer.OSM( "Simple OSM Map");
map.addLayer(layer);
map.setCenter(
    new OpenLayers.LonLat(-71.147, 42.472).transform(
        new OpenLayers.Projection("EPSG:4326"),
        map.getProjectionObject()
        ), 12
    );
    map.addControl(new OpenLayers.Control.Navigation({
        zoomWheelEnabled: true,
    }));
// initialize the jQueryUI Dialog
div.dialog({
    width:800,
    height:600,
    title: 'My Map',
    resizeStop: function(){
        map.updateSize(); //to prevent drag-zoom error
    },
    dragStop: function(){
        map.updateSize(); //to prevent drag-zoom error
    }
});

Answer 1

似乎jQuery对话框默认禁用滚动。

添加这行可以解决(你的)问题:

$('#map').css('overflow', 'hidden');    

我相信这不是最终的解决方案，但它向你展示了……:)