krpano之小地图

krpano之小地图

效果：

　　点击地图按钮时，小地图移入，再次点击时移出。

　　地图上显示表示场景位置的坐标点，和可控制场景观看方向的雷达区。

插件：

　　radar.js（plugins）

　　radar.swf（plugins）

图片：

　　1.地图开关按钮

　　2.场景小地图

　　3.雷达标点的选中和未选中两张图

步骤：

　　1.制作地图开关按钮。（皮肤文件）

<layer name="skin_btn_littlemap"      style="skin_base|skin_glow" crop="64|0|64|64"   align="righttop"  x="15"    y="50"  scale="0.5" alpha="1" onclick="openmap()" />

　　2.制作地图底层容器。（皮肤文件）

<layer name="mapcontainer" keep="true" type="container" bgcolor="0x000000" bgalpha="0" align="righttop" x="-346" y="100" width="346" height="354">

</layer>

　　3.在底层容器中插入图片。（皮肤文件）

 <layer name="map" url="map.png" align="left" x="0" y="0" width="346" height="354" handcursor="false" >

</layer>

　　4.在图片中插入雷达指针。（皮肤文件）

　　　　此处调用 radar.swf 、radar.js 插件，此插件为官方插件，用来设置雷达的旋转。

<plugin name="radars" url="%SWFPATH%/plugins/radar.swf" alturl="%SWFPATH%/plugins/radar.js" editmode="true" zorder="1" keep="true" heading="0"  parent="mapbar" align="lefttop" edge="center" x="156" y="166" 
linecolor="0"  fillcolor="0xFF9900" scale="0.5" />
<plugin name="activespot" url="%SWFPATH%/skin/current_pano.png" keep="true" align="lefttop" x="11" y = "11" edge="center" visible="true" zorder="6" />

　　5.在图片中插入热点。（皮肤文件）

　　　　热点与场景一一对应，onclick时间的作用为跳转到对应场景。

<layer name="spot1" url="%SWFPATH%/skin/hot.png"  align="lefttop" edge="center" x="156" y="166" zorder="2" onclick="loadscene(scene_10);" />
<layer name="spot2" url="%SWFPATH%/skin/hot.png"  align="lefttop" edge="center" x="111" y="216" zorder="2" onclick="loadscene(scene_11);" />

　　上述代码总述。

<!--地图按钮-->
        <layer name="skin_btn_littlemap"      style="skin_base|skin_glow" crop="64|0|64|64"   align="righttop"  x="15"    y="50"  scale="0.5" alpha="1" onclick="openmap()" />
        <!--插入底层容器-->
        <layer name="mapcontainer" keep="true" type="container" bgcolor="0x000000" bgalpha="0" align="righttop" x="-346" y="100" width="346" height="354">
            <!--插入地图图片    -->
            <layer name="map" url="map.png" align="left" x="0" y="0" width="346" height="354" handcursor="false" >
                <!-- 户型图雷达指针 -->
                <plugin name="radars" url="%SWFPATH%/plugins/radar.swf" alturl="%SWFPATH%/plugins/radar.js" editmode="true" zorder="1" keep="true" heading="0"  parent="mapbar" align="lefttop" edge="center" x="156" y="166" linecolor="0"  fillcolor="0xFF9900" scale="0.5" />
                <plugin name="activespot" url="%SWFPATH%/skin/current_pano.png" keep="true" align="lefttop" x="11" y = "11" edge="center" visible="true" zorder="6" />
                <!-- 户型图雷达指针  -->
                <!--插入热点-->
                <layer name="spot1" url="%SWFPATH%/skin/hot.png"  align="lefttop" edge="center" x="156" y="166" zorder="2" onclick="loadscene(scene_10);" />
                <layer name="spot2" url="%SWFPATH%/skin/hot.png"  align="lefttop" edge="center" x="111" y="216" zorder="2" onclick="loadscene(scene_11);" />
            </layer>
        </layer>

View Code