注：此处所说的弹窗窗口，主要指的是那些弹窗窗口中嵌入iframe，包含信息页面的窗口大小控制。
1、首先来了解下 SuperMap 示例中的处理方案
二维的处理方式
1 //初始化Anchored类 2 popup = new SuperMap.Popup.Anchored( 3 "chicken", 4 marker.getLonLat(), 5 new SuperMap.Size(220,140), 6 "<iframe frameborder=no border=0 src=‘http://www.baidu.com‘ style=‘width:100%;height:100%;border:none;‘ border=‘0‘></iframe>", 7 icon, 8 true, 9 null 10 ); 11 12 infowin = popup; 13 //添加弹窗到map图层 14 map.addPopup(popup);
二维弹窗处理方式
三维的处理方式
1 function createBubble(pos){
2 try{
3 bubble = new SuperMap.Web.Realspace.Bubble();
4 bubble.set_pointer(pos);
5
6 //设置气泡标题内容
7 var title = document.getElementById("TitleName").value;
8 if (title != null) {
9 bubble.set_title(title);
10 }
11
12 var textStyle3D = new SuperMap.Web.Core.TextStyle3D();
13
14 //设置气泡标题对齐方式
15 var textAligns = document.getElementById("TextAlign");
16 for(var i=0;i<textAligns.length;i++)
17 {
18 if (textAligns[i].selected) {
19 textStyle3D.set_alignment(textAligns[i].value);
20 }
21 }
22 //设置标题文本字体
23 var fontNames = document.getElementById("FontName");
24 for(var i=0;i<fontNames.length;i++){
25 if (fontNames[i].selected) {
26 var selectValue = fontNames[i].value;
27 if (selectValue == 1) {
28 textStyle3D.set_fontName("微软雅黑");
29 }
30 else if (selectValue == 2) {
31 textStyle3D.set_fontName("宋体");
32 }
33 else if (selectValue == 3) {
34 textStyle3D.set_fontName("隶书");
35 }
36 }
37 }
38
39 //设置标题字体颜色
40 var fontColors = document.getElementById("FontColor");
41 for(var i = 0;i<fontColors.length;i++){
42 if (fontColors[i].selected) {
43 var selectColor = fontColors[i].value;
44 switch(selectColor) {
45 case "Red":
46 textStyle3D.set_foreColor(new SuperMap.Web.Core.Color(255,0,0,100));
47 break;
48 case "Green":
49 textStyle3D.set_foreColor(new SuperMap.Web.Core.Color(0,255,0,100));
50 break;
51 case "Blue":
52 textStyle3D.set_foreColor(new SuperMap.Web.Core.Color(0,0,255,100));
53 break;
54 default:
55 bubble.set_backColor(new SuperMap.Web.Core.Color(0,0,0,255));
56 break;
57 }
58 }
59 }
60
61 bubble.set_titleTextStyle3D(textStyle3D);
62
63 //设置气泡边框宽度
64 var frameWidth = document.getElementById("FrameWidth").value;
65 if (frameWidth != null) {
66 bubble.set_frameWidth(frameWidth);
67 }
68
69 //设置气泡圆角程度
70 var roundQuality = document.getElementById("RoundQuality").value;
71 if (roundQuality != null) {
72 bubble.set_roundQuality(roundQuality);
73 }
74
75 //设置边框颜色
76 var frameColors = document.getElementById("FrameColor");
77 for(var i = 0;i<frameColors.length;i++){
78 if (frameColors[i].selected) {
79 var selectColor = frameColors[i].value;
80 switch(selectColor) {
81 case "Red":
82 bubble.set_backColor(new SuperMap.Web.Core.Color(255,0,0,100));
83 break;
84 case "Green":
85 bubble.set_backColor(new SuperMap.Web.Core.Color(0,255,0,100));
86 break;
87 case "Blue":
88 bubble.set_backColor(new SuperMap.Web.Core.Color(0,0,255,100));
89 break;
90 default:
91 bubble.set_backColor(new SuperMap.Web.Core.Color(255,255,255,255));
92 break;
93 }
94 }
95 }
96 bubble.set_frameColor(new SuperMap.Web.Core.Color(255,255,255,255));
97
98 bubble.set_height(400);
99 bubble.set_width(500);
100
101 sceneControl.get_bubbles().removeAll();
102 sceneControl.get_bubbles().add(bubble);
103 }
104 catch(e){
105 alert("创建气泡失败");
106 }
107 }
108
109 function bubbleInitialize(bubble){
110 try
111 {
112 var frameInfo = document.getElementById("infoWindow");
113 frameInfo.style.display = "block";
114 frameInfo.src = infoPage;
115
116 frameInfo.frameborder = 0;
117 frameInfo.style.marginwidth = 0;
118 frameInfo.style.marginheight = 0;
119
120 frameInfo.style.width = bubble.get_clientWidth()+"px";
121 frameInfo.style.height = bubble.get_clientHeight()+"px";
122 frameInfo.style.left = bubble.get_clientLeft() + sceneControl.get_controlOffsetX()+"px";
123 frameInfo.style.top = bubble.get_clientTop() + sceneControl.get_controlOffsetY()+"px";
124 }
125 catch(e){
126 alert("Faile to initialize bubble");
127 }
128 }
129
130 function bubbleResize(bubble){
131 try
132 {
133 var frameInfo = document.getElementById("infoWindow");
134 frameInfo.style.display = "block";
135 frameInfo.src = infoPage;
136
137 frameInfo.style.width = bubble.get_clientWidth()+"px";
138 frameInfo.style.height = bubble.get_clientHeight()+"px";
139 frameInfo.style.left = bubble.get_clientLeft() + sceneControl.get_controlOffsetX()+"px";
140 frameInfo.style.top = bubble.get_clientTop() + sceneControl.get_controlOffsetY()+"px";
141 }
142 catch(e)
143 {
144 alert("Failed to resize bubble");
145 }
146 }
147
148 //关闭气泡
149 function bubbleClose(bubble){
150 try
151 {
152 var frameInfo = document.getElementById("infoWindow");
153 frameInfo.style.display = "none";
154
155 var selection3Ds = scene.findSelection3Ds(true);
156 if (selection3Ds.length > 0) {
157 for(var i = 0; i <= selection3Ds.length - 1; i++){
158 selection3Ds[i].removeAll();
159 }
160 }
161 }
162 catch(e){
163 alert("Failed to close bubble");
164 }
165 }
三维弹窗处理方式
示例处理方式评价：
优点：使用示例中的处理方式，简单方便，在初始化弹窗的时候，即设置好了弹窗窗口的大小，这样在弹窗弹出的时候，窗口大小就已经固定，不会出现弹窗大小变动的现象，用户体验好。
缺点：在后期如果需要补充信息页面数据，窗口大小需要根据页面显示范围调整大小。此时就需要找到弹出窗口的代码，修改弹窗初设宽度和高度。如果只是几个页面，这么操作还好，如果需要修改的弹窗很多，修改很频繁，那么这么设置的弊病就出来了。需要花费很多功夫。
2、为了有效解决这个问题，于是下面的方案就出来了。
操作步骤如下：
1、在二维和三维初始化弹窗的时候，随意设置一个宽度和高度，建议设置成小尺寸即可。
1 popup = new SuperMap.Popup.Anchored( 2 "chicken", 3 marker.getLonLat(), 4 new SuperMap.Size(10,10), 5 "<iframe frameborder=no border=0 src=‘http://www.baidu.com‘ style=‘width:100%;height:100%;border:none;‘ border=‘0‘></iframe>", 6 icon, 7 true, 8 null 9 );
二维操作
1 bubble.set_height(10); 2 bubble.set_width(10);
三维操作
2、设置弹窗中显示页面的body的style，设置width和height，根据页面内容多少对应设置对应width和height。
1 <body style="padding:15px;width:320px;height:380px;">
页面代码示例
3、在弹窗中显示页面加载之后，调用地图和三维场景的弹窗对象，重新设置弹窗的width和height。
1 /**
2 * 本js用于地图或者场景弹窗中嵌入iframe页面后，弹窗根据iframe内容自动缩放大小。
3 * 注意：嵌入页面需要设置body的width,并且嵌入页面需要引入本js
4 */
5 function resizePop(){
6 /// 查找对应的iframe
7 var _iframe;
8 var _frames=parent.$("iframe");
9 for(var i=0;i<_frames.length;i++){
10 if(_frames[0].src.match(location.herf)){
11 _frame=_frames[i];
12 }
13 }
14
15 if(parent["_map"]){// map对象存在
16
17 var _popArray=parent._map.popups;
18 for(var i=0;i<_popArray.length;i++){
19 var _pop=_popArray[i];
20
21 /// 判断寻找对应的pop
22 if($(_frame).parent().attr("id").split("_")[0]===_pop.id){
23 _pop.setSize(new parent.SuperMap.Size($(document.body).outerWidth(),$(document.body).outerHeight()));
24 }
25 }
26 }else if(parent.window["sceneControl"]){// 3d不存在
27 var _bubble=parent.bubble;
28 var _padding_L=Number($(document.body).css("padding-left").replace("px",""));
29 var _padding_R=Number($(document.body).css("padding-right").replace("px",""));
30 var _padding_B=Number($(document.body).css("padding-bottom").replace("px",""));
31 var _padding_T=Number($(document.body).css("padding-top").replace("px",""));
32
33 _bubble.set_clientWidth($(document.body).width()+12+_padding_L+_padding_R);
34 _bubble.set_clientHeight($(document.body).height()+12+_padding_B+_padding_T);
35 }
36 }
37
38 $(document).ready(function(){
39 resizePop();
40 });
示例代码
注：代码为开发环境配置，未做处理，不一定适合测试，仅供参考
此种方案处理评价：
优点：每次修改弹窗信息页面显示内容的时候，不论增加还是减少内容，修改完毕后，对应修改页面body的style即可。而不用去查找调用弹窗的代码。修改信息，本身就在信息页面操作，操作完毕后，顺手改了宽度和高度即可。
缺点：每次弹窗弹出来的时候，会有一个弹窗由小变大的一个效果。
时间： 2024-10-10 18:08:22