jquery-ui - 如何将 OpenLayers map 集成到 jQuery-ui 对话框中?

标签 jquery-ui jquery-ui-dialog openlayers

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

尝试将 map 嵌入对话框时出现问题。

正确的操作顺序是什么:

  • 初始化OL map
  • 声明 jquery 对话框
  • 打开 jquery 对话框

谢谢

阿尔贝托

最佳答案

这是我的(工作)解决方案:

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

关于jquery-ui - 如何将 OpenLayers map 集成到 jQuery-ui 对话框中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7413791/

相关文章:

javascript - 在更改时获取微调器 ui 值

Jquery UI 选项卡在加载时禁用

javascript - jQuery UI 设计模式问题

jquery - 对话框中的 jwplayer - 关闭对话框窗口后播放器不再显示

gis - OpenLayers,如何限制 WMS 图层范围

jQuery 幻灯片效果存在弹跳定位问题

html - 当加载到 JQuery 对话框中时,复选框标 checkout 现额外的空格。

javascript - 使用控制比例线保存 map

svg - 在 OpenLayers 中使用 SVG 图标作为标记

css - 从 jQuery UI 对话框中删除特定样式