如何将 OpenLayers 地图集成到 jQuery-ui 对话框中？

Question

我有一个带有 Openlayer 地图的网页。当用户单击标记时，将打开一个 jquery-ui 对话框并显示来自 ajax 调用的一些信息。我还想显示一个以单击的标记为中心的小型 openlayers 地图。

尝试将地图嵌入到对话框中时出现问题。

正确的操作顺序是什么：

• init OL map
• 声明 jquery 对话框
• 打开 jquery 对话框

谢谢

alberto

Answer 1

这是我的（工作）解决方案：

// create map container (id=map) and append to document body
var div = $('<div />')
            .attr('id', 'map').
            css({width:400,height:400})
            .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
    );

// 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
    });