基础知识
该插件应用了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>