基礎知識

該插件應用了scrollarea插件和radar插件.應用scrollarea插件是為了拖動圖片超出區域時自動彈回,不至于拖拽時那么生硬 應用radar插件則是保持活動熱點區域的扇形與場景保持一致

完整代碼

<krpano> <!-- qmaplayer設置 --><maplayer name="qmaplayer_container"><map_group name="qmap_group_1" url="%SWFPATH%/mapimg/map.jpg" map_min_zoom="0.5" map_max_zoom="1.2" zoom="1" current="true" text="一樓" btn_x="0"><spot name="qmap_spot_1" style="qmap_spot_style" textstyle="qmap_spot_text_style" prefix="" suffix="" lat="600" lng="300" heading="90" scene="scene_2___TBS___"/><spot name="qmap_spot_2" style="qmap_spot_style" textstyle="qmap_spot_text_style" prefix="" suffix="" lat="476" lng="487" heading="0" scene="scene_2___TBS___"/><spot name="qmap_spot_3" style="qmap_spot_style" textstyle="qmap_spot_text_style" prefix="" suffix="" lat="671" lng="429" heading="0" scene="scene_2___TBS___"/></map_group><map_group name="qmap_group_2" url="%SWFPATH%/mapimg/map_1.jpg" map_min_zoom="0.5" map_max_zoom="1.2" zoom="1" current="false" text="二樓" btn_x="55"><spot name="qmap_spot_4" style="qmap_spot_style" textstyle="qmap_spot_text_style" prefix="" suffix="" lat="135" lng="742" heading="0" scene="scene_2___TBS___"/><spot name="qmap_spot_5" style="qmap_spot_style" textstyle="qmap_spot_text_style" prefix="" suffix="" lat="153" lng="519" heading="0" scene="scene_2___TBS___"/><spot name="qmap_spot_6" style="qmap_spot_style" textstyle="qmap_spot_text_style" prefix="" suffix="" lat="200" lng="423" heading="0" scene="scene_2___TBS___"/><spot name="qmap_spot_7" style="qmap_spot_style" textstyle="qmap_spot_text_style" prefix="" suffix="" lat="150" lng="681" heading="0" scene="scene_2___TBS___"/></map_group></maplayer><!-- 皮膚相關(包括外層容器、按鈕) --><style name="qmap_container_style" parent="stage" bgcolor="0x2b3c4e" bgalpha="0.5" align="rightbottom" edge="rightbottom" x="0" width="300" height="326" maskchildren="true" bgcapture="true" keep="true" /><style name="qmap_container_btn_circle" zorder="1" bgroundedge="50" keep="true" type="container" align="leftbottom" x="10" y="10" width="40" height="40" bgcolor="0x22798b" bgalpha="0.5" bgcapture="true" onover="qmap_container_btn_circle_over" onout="qmap_container_btn_circle_out" /><style name="qmap_container_btn_circle_text" type="text" keep="true" background="false" css="font-family:Arial; font-size:30px; color:#FFFFFF;" align="center" vcenter="center" /><style name="qmap_container_btn_floor" parent="qmap_container" keep="true" zorder="1" bgroundedge="0" type="container" align="lefttop" x="0" y="0" width="50" height="26" bgcolor="0x22798b" bgalpha="0.5" bgcapture="true" maskchildren="false" /><style name="qmap_container_btn_floor_text" type="text" keep="true" background="false" css="font-family:Arial; font-size:18px; color:#FFFFFF;" align="center" vcenter="center" /><style name="qmap_radar_style" align="center" edge="center" x="0" y="-10" scale="1.0" heading="0.0" headingoffset="0.0" fillcolor="0xffc900" fillalpha="0.5" linecolor="0xffc900" linewidth="0.1" linealpha="0.5" invert="false" editmode="false" keep="true" ondown="qmap_area_map_spot_down" onup="qmap_area_map_spot_up" /><style name="qmap_spot_active_style" url="%SWFPATH%/mapimg/radar-active.png" align="lefttop" edge="lefttop" scale="1.0" keep="true" onclick="qmap_area_map_spot_click" /><style name="qmap_spot_style" url="%SWFPATH%/mapimg/radar-out.png" align="lefttop" edge="lefttop" scale="1.0" keep="true" onclick="qmap_area_map_spot_click" /><!-- 核心代碼,布局 --><area mode="border" top="1" right="300" bottom="1" left="1" /><layer name="qmap_container" style="qmap_container_style" type="container" maskchildren="true" bgcapture="true" onover="qmap_container_over" onout="qmap_container_out" onloaded="qmap_container_loaded"><!-- 縮放按鈕 --><layer name="qmap_container_btn_in_outer" style="qmap_container_btn_circle"><layer name="qmap_container_btn_in" style="qmap_container_btn_circle_text" html="[span class='zutitls zutitls-jia']" ondown="qmap_area_map_btn_zoom(0.03)"/></layer><layer name="qmap_container_btn_out_outer" style="qmap_container_btn_circle" x="60"><layer name="qmap_container_btn_out" style="qmap_container_btn_circle_text" html="[span class='zutitls zutitls-jian']" ondown="qmap_area_map_btn_zoom(-0.03)"/></layer><!-- 分組按鈕 --><!-- <layer name="qmap_container_btn_floor1_outer" style="qmap_container_btn_floor"><layer name="qmap_container_btn_floor1" style="qmap_container_btn_floor_text" html="一樓" onclick="qmap_container_btn_floor_click(qmap_group_1)"/></layer><layer name="qmap_container_btn_floor2_outer" style="qmap_container_btn_floor" x="55"><layer name="qmap_container_btn_floor2" style="qmap_container_btn_floor_text" html="二樓" onclick="qmap_container_btn_floor_click(qmap_group_2)"/></layer> --></layer><!-- 最外層容器事件 --><action name="qmap_container_over"><!-- 標記縮放為真,當前分組背景已在加載分組背景時設置,記錄場景滾輪縮放值,并且改變為false -->set(qmap_iszoom, true); set(qmap_current_group_map, get(qmap_current_group_map_image));copy(qmap_copy_control_mousefovchange, control.mousefovchange);copy(qmap_copy_control_touchzoom, control.touchzoom);set(control.mousefovchange, 0); set(control.touchzoom, false); </action><action name="qmap_container_out"><!-- 標記縮放為否,置空當前分組背景,恢復場景滾輪縮放 -->set(qmap_iszoom, false);set(qmap_current_group_map, null);set(control.mousefovchange, get(qmap_copy_control_mousefovchange));set(control.touchzoom, get(qmap_copy_control_touchzoom));</action><action name="qmap_container_loaded"><!-- 局部變量 -->copy(map_group_copy, maplayer[0].map_group);set(qmap_area_container, get(maplayer[0].name));set(qmap_area_url, "%SWFPATH%/mapimg/scrollarea.js");if(device.flash, set(qmap_area_url, "%SWFPATH%/mapimg/scrollarea.swf"););set(qmap_area_prefix, 'qmap_scrollarea_');set(qmap_area_map_prefix, 'qmap_scrollarea_map_');<!-- 添加滾動區域容器 -->addlayer(get(qmap_area_container));set(layer[get(qmap_area_container)].type, container);set(layer[get(qmap_area_container)].align, lefttop);set(layer[get(qmap_area_container)].edge, lefttop);set(layer[get(qmap_area_container)].oy, 26);set(layer[get(qmap_area_container)].width, get(width));set(layer[get(qmap_area_container)].height, calc(height - 26));set(layer[get(qmap_area_container)].parent, get(name));set(layer[get(qmap_area_container)].keep, true);<!-- 讀取qmaplayer數組,設置分組map,熱點,及設置當前活動熱點為中心 -->for(set(i,0), i LT map_group_copy.count, inc(i),copy(map_group_copy_i, map_group_copy[get(i)]);<!-- 添加滾動區域 -->txtadd(qmap_area, get(qmap_area_prefix), get(map_group_copy[get(i)].name));addlayer(get(qmap_area));set(layer[get(qmap_area)].url, get(qmap_area_url));set(layer[get(qmap_area)].align, center);set(layer[get(qmap_area)].edge, center);set(layer[get(qmap_area)].width, get(width));set(layer[get(qmap_area)].height, get(height));set(layer[get(qmap_area)].mwheel, false);set(layer[get(qmap_area)].parent, get(qmap_area_container));set(layer[get(qmap_area)].keep, true);set(layer[get(qmap_area)].visible, get(map_group_copy_i.current));<!-- 添加map圖片層 -->txtadd(qmap_area_map, get(qmap_area_map_prefix), get(map_group_copy_i.name));set(qmap_area_map_url, get(map_group_copy_i.url));addlayer(get(qmap_area_map));set(layer[get(qmap_area_map)].url, get(qmap_area_map_url));set(layer[get(qmap_area_map)].scale, 1.0);set(layer[get(qmap_area_map)].x, 0);set(layer[get(qmap_area_map)].y, 0);set(layer[get(qmap_area_map)].align, lefttop);set(layer[get(qmap_area_map)].edge, lefttop);set(layer[get(qmap_area_map)].parent, get(qmap_area));set(layer[get(qmap_area_map)].keep, true);set(layer[get(qmap_area_map)].scalechildren, true);set(layer[get(qmap_area_map)].onloaded, qmap_area_map_loaded);<!-- 添加分組按鈕 -->qmap_area_map_loaded_loadbutton(map_group_copy_i););</action><action name="qmap_area_map_loaded_loadspot"><!-- 局部變量 -->set(qmap_area_map_loaded_loadspot_m_parent_name, %1);set(qmap_area_map_loaded_loadspot_m_radar_url, "%SWFPATH%/mapimg/radar.js");if(device.flash, set(qmap_area_map_loaded_loadspot_m_radar_url, "%SWFPATH%/mapimg/radar.swf"));<!-- set(qmap_area_map_prefix, 'qmap_scrollarea_map_'); -->set(map_group_name, %1);txtreplace(map_group_name, get(qmap_area_map_prefix), '');copy(map_group_spots, maplayer[0].map_group[get(map_group_name)].spot);set(qmap_area_map_radar_prefix, 'qmap_scrollarea_map_radar_');txtadd(qmap_area_map_loaded_loadspot_m_radar_name, get(qmap_area_map_radar_prefix), get(map_group_name));<!-- 添加radar雷達插件 -->addplugin(get(qmap_area_map_loaded_loadspot_m_radar_name));set(plugin[get(qmap_area_map_loaded_loadspot_m_radar_name)].url, get(qmap_area_map_loaded_loadspot_m_radar_url));plugin[get(qmap_area_map_loaded_loadspot_m_radar_name)].loadstyle(qmap_radar_style);for(set(i,0), i LT map_group_spots.count, inc(i),copy(spot_i, map_group_spots[get(i)]);set(qmap_area_map_spot_prefix, 'qmap_scrollarea_map_spot_');txtadd(qmap_area_map_loaded_loadspot_m_name, get(qmap_area_map_spot_prefix), get(spot_i.name));addlayer(get(qmap_area_map_loaded_loadspot_m_name));set(layer[get(qmap_area_map_loaded_loadspot_m_name)].x, get(spot_i.lat));set(layer[get(qmap_area_map_loaded_loadspot_m_name)].parent, get(qmap_area_map_loaded_loadspot_m_parent_name));set(layer[get(qmap_area_map_loaded_loadspot_m_name)].x, get(spot_i.lat));set(layer[get(qmap_area_map_loaded_loadspot_m_name)].y, get(spot_i.lng));set(layer[get(qmap_area_map_loaded_loadspot_m_name)].heading, get(spot_i.heading));layer[get(qmap_area_map_loaded_loadspot_m_name)].loadstyle(qmap_spot_style);if(i === 0,layer[get(qmap_area_map_loaded_loadspot_m_name)].loadstyle(qmap_spot_active_style);set(plugin[get(qmap_area_map_loaded_loadspot_m_radar_name)].parent, get(qmap_area_map_loaded_loadspot_m_name));<!-- 設置當前熱點,使用scrollarea層是否顯示做判斷 --><!-- if(layer[get(layer[get(qmap_area_map_loaded_loadspot_m_parent_name)].parent)].visible, -->set(layer[get(qmap_area_map_loaded_loadspot_m_parent_name)].current_spot, get(qmap_area_map_loaded_loadspot_m_name));set(layer[get(qmap_area_map_loaded_loadspot_m_parent_name)].current_radar, get(qmap_area_map_loaded_loadspot_m_radar_name));set(plugin[get(qmap_area_map_loaded_loadspot_m_radar_name)].heading, get(spot_i.heading));<!-- ); -->););<!-- 移除局部變量 -->delete(qmap_area_map_loaded_loadspot_m_parent_name, qmap_area_map_loaded_loadspot_m_name, qmap_area_map_loaded_loadspot_m_radar_name, qmap_area_map_loaded_loadspot_m_radar_url);</action><action name="qmap_area_map_loaded_loadbutton"><!-- 根據分組添加按鈕 -->set(qmap_container_btn_prefix, 'qmap_container_btn_');set(qmap_container_btn_suffix, '_outer');set(qmap_container_btn_group, get(%1.name));txtadd(qmap_container_btn_name, get(qmap_container_btn_prefix), get(qmap_container_btn_group));txtadd(qmap_container_btn_outer_name, get(qmap_container_btn_name), get(qmap_container_btn_suffix));txtadd(qmap_container_btn_click, 'qmap_container_btn_floor_click(', get(qmap_container_btn_group), ');');<!-- 添加外層背景 -->addlayer(get(qmap_container_btn_outer_name));layer[get(qmap_container_btn_outer_name)].loadstyle(qmap_container_btn_floor);set(layer[get(qmap_container_btn_outer_name)].x, get(%1.btn_x));if(%1.current, set(layer[get(qmap_container_btn_outer_name)].bgalpha, 1.0);set(layer[get(layer[get(qmap_container_btn_outer_name)].parent)].current_btn, get(qmap_container_btn_outer_name)););<!-- 添加內層文字 -->addlayer(get(qmap_container_btn_name));layer[get(qmap_container_btn_name)].loadstyle(qmap_container_btn_floor_text);set(layer[get(qmap_container_btn_name)].parent, get(qmap_container_btn_outer_name));set(layer[get(qmap_container_btn_name)].html, get(%1.text));set(layer[get(qmap_container_btn_name)].onclick, get(qmap_container_btn_click));</action><action name="qmap_area_map_spot_down"><!-- 設置scrollarea層不可拖動,防止拖拽雷達插件時背景圖片跟著被拖動 -->copy(qmap_area_map_spot_down_m_spot, layer[get(layer[get(name)].parent)]);copy(qmap_area_map_spot_down_m_map, layer[get(qmap_area_map_spot_down_m_spot.parent)]);copy(qmap_area_map_spot_down_m_area, layer[get(qmap_area_map_spot_down_m_map.parent)]);set(qmap_area_map_spot_down_m_area.draggable, false);</action><action name="qmap_area_map_spot_up"><!-- 設置scrollarea層不可拖動,防止拖拽雷達插件時背景圖片跟著被拖動 -->copy(qmap_area_map_spot_down_m_spot, layer[get(layer[get(name)].parent)]);copy(qmap_area_map_spot_down_m_map, layer[get(qmap_area_map_spot_down_m_spot.parent)]);copy(qmap_area_map_spot_down_m_area, layer[get(qmap_area_map_spot_down_m_map.parent)]);set(qmap_area_map_spot_down_m_area.draggable, true);</action><action name="qmap_area_map_spot_click"><!-- 點擊熱點切換場景,需判斷是否為當前熱點,避免重復渲染 -->if(name !== layer[get(layer[get(name)].parent)].current_spot, layer[get(layer[get(layer[get(name)].parent)].current_spot)].loadstyle(qmap_spot_style);layer[get(name)].loadstyle(qmap_spot_active_style);set(layer[get(layer[get(name)].parent)].current_spot, get(name));set(plugin[get(layer[get(layer[get(name)].parent)].current_radar)].parent, get(name));set(plugin[get(layer[get(layer[get(name)].parent)].current_radar)].heading, get(heading));loadscene(scene_2___TBS___););</action><!-- 分組背景圖片事件 --><action name="qmap_area_map_loaded"><!-- 局部變量 -->copy(qmap_area_map_m_area, layer[get(layer[get(name)].parent)]);copy(qmap_area_map_m_conatainer, layer[get(qmap_area_map_m_area.parent)]);set(qmap_area_map_m_area.width, get(width));set(qmap_area_map_m_area.height, get(height));<!-- 求取設置最小縮放級別,確保背景圖片至少有一個維度(高or寬)等于容器相同維度(高or寬) -->div(qmap_area_map_m_ratio_w, get(qmap_area_map_m_conatainer.width), get(qmap_area_map_m_area.width));div(qmap_area_map_m_ratio_h, get(qmap_area_map_m_conatainer.height), get(qmap_area_map_m_area.height));def(qmap_area_map_loaded_m_max_zoom, number, 1);set(layer[get(name)].map_max_zoom, get(qmap_area_map_loaded_m_max_zoom));set(layer[get(name)].map_min_zoom, get(qmap_area_map_m_ratio_w));if(qmap_area_map_m_ratio_w GE qmap_area_map_m_ratio_h, set(layer[get(name)].map_min_zoom, get(qmap_area_map_m_ratio_h)) );<!-- 記錄當前顯示分組name -->if(layer[get(layer[get(name)].parent)].visible, set(qmap_current_group_map_image, get(name)));<!-- 添加當前背景熱點 -->qmap_area_map_loaded_loadspot(get(name));</action><!-- 背景縮放事件 --><!-- 此事件有限制：不能使用在area區域外層 --><events name="qmap_area_map_zoom_events" keep="true" onmousewheel="qmap_area_map_mousewheel();" /><action name="qmap_area_map_mousewheel"><!-- 針對鼠標滾輪縮放的事件,后期可擴展加上觸屏縮放的處理 -->if(qmap_iszoom, <!-- 局部變量 -->copy(qmap_area_map_mousewheel_m_self, layer[get(qmap_current_group_map)]);copy(qmap_area_map_mousewheel_m_area, layer[get(qmap_area_map_mousewheel_m_self.parent)]);mul(qmap_area_map_mousewheel_m_speed, get(wheeldelta), 0.03); mul(qmap_area_map_mousewheel_m_speed, qmap_area_map_mousewheel_m_self.scale); add(qmap_area_map_mousewheel_m_self.scale, qmap_area_map_mousewheel_m_speed); add(qmap_area_map_mousewheel_m_area.scale, qmap_area_map_mousewheel_m_speed);if(qmap_area_map_mousewheel_m_self.scale GE qmap_area_map_mousewheel_m_self.map_max_zoom,set(qmap_area_map_mousewheel_m_self.scale, get(qmap_area_map_mousewheel_m_self.map_max_zoom));set(qmap_area_map_mousewheel_m_area.scale, get(qmap_area_map_mousewheel_m_self.map_max_zoom)););if(qmap_area_map_mousewheel_m_self.scale LE qmap_area_map_mousewheel_m_self.map_min_zoom,set(qmap_area_map_mousewheel_m_self.scale, get(qmap_area_map_mousewheel_m_self.map_min_zoom));set(qmap_area_map_mousewheel_m_area.scale, get(qmap_area_map_mousewheel_m_self.map_min_zoom));););</action><action name="qmap_area_map_btn_zoom"><!-- 這里檢測當前分組map是否為null,并賦值 -->set(qmap_current_group_map, get(qmap_current_group_map_image));asyncloop(pressed, qmap_area_map_auto_zoom(%1));</action><action name="qmap_area_map_auto_zoom"><!-- 局部變量 -->copy(qmap_area_map_auto_zoom_m_self, layer[get(qmap_current_group_map)]);copy(qmap_area_map_auto_zoom_m_area, layer[get(qmap_area_map_auto_zoom_m_self.parent)]);set(qmap_area_map_auto_zoom_m_speed, %1);mul(qmap_area_map_auto_zoom_m_speed, qmap_area_map_auto_zoom_m_self.scale);add(qmap_area_map_auto_zoom_m_self.scale, get(qmap_area_map_auto_zoom_m_speed)); add(qmap_area_map_auto_zoom_m_area.scale, get(qmap_area_map_auto_zoom_m_speed));if(qmap_area_map_auto_zoom_m_self.scale GE qmap_area_map_auto_zoom_m_self.map_max_zoom,set(qmap_area_map_auto_zoom_m_self.scale, get(qmap_area_map_auto_zoom_m_self.map_max_zoom));set(qmap_area_map_auto_zoom_m_area.scale, get(qmap_area_map_auto_zoom_m_self.map_max_zoom)););if(qmap_area_map_auto_zoom_m_self.scale LE qmap_area_map_auto_zoom_m_self.map_min_zoom,set(qmap_area_map_auto_zoom_m_self.scale, get(qmap_area_map_auto_zoom_m_self.map_min_zoom));set(qmap_area_map_auto_zoom_m_area.scale, get(qmap_area_map_auto_zoom_m_self.map_min_zoom)););</action><!-- 縮放按鈕特效事件 --><action name="qmap_container_btn_circle_over">set(bgshadow,'5 0 5 0x000000 0.5');</action><action name="qmap_container_btn_circle_out">set(bgshadow,'10 10 10 0x000000 0');</action> <!-- 分組按鈕事件 --><action name="qmap_container_btn_floor_click">txtadd(qmap_scrollarea_arg, get(qmap_area_prefix), %1);set(qmap_scrollarea_current, get(layer[get(qmap_current_group_map_image)].parent));txtadd(qmap_scrollarea_arg_map, get(qmap_area_map_prefix), %1);txtadd(qmap_scrollarea_arg_btn_outer_name, get(qmap_container_btn_prefix), %1, get(qmap_container_btn_suffix));if(qmap_scrollarea_arg !== qmap_scrollarea_current,set(layer[get(qmap_scrollarea_current)].visible, false);set(layer[get(qmap_scrollarea_arg)].visible, true);set(qmap_current_group_map_image, get(qmap_scrollarea_arg_map));<!-- 按鈕切換效果 -->set(layer[get(qmap_scrollarea_arg_btn_outer_name)].bgalpha, 1);set(layer[get(layer[get(layer[get(qmap_scrollarea_arg_btn_outer_name)].parent)].current_btn)].bgalpha, 0.5);set(layer[get(layer[get(qmap_scrollarea_arg_btn_outer_name)].parent)].current_btn, get(qmap_scrollarea_arg_btn_outer_name)););</action><!-- 放大按鈕事件 --><action name="ssds">set(layer[qmap_container].width, '80%');set(layer[qmap_container].height, '80%');set(layer[qmap_container].align, 'center');set(layer[qmap_container].edge, 'center');</action> </krpano>

轉載于:https://www.cnblogs.com/CodeDeath/p/8309098.html

總結

以上是生活随笔為你收集整理的krpano·分组图片地图插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。