krpano实现多语言切换

最近做项目遇到的需求,在全景图里实现中英文切换。然后自己就想了这么一套方案

1. 首先创建我们的语言包

这里在根目录下创建

中文语言包 lange_cn.xml

<krpano>
	<set_lange
		scene1_name="企业文化大厅"
		scene2_name="样品展厅1"
		scene3_name="样品展厅2"
		hotspot1_name="新款"
		hotspot2_name="官网链接"
		hotspot3_name="塑料水壶系列"
		hotspot4_name="玻璃水壶系列"
		hotspot5_name="不锈钢系列"
	/>
	<include url="tour.xml" />
</krpano>

中文语言包 lange_en.xml

<krpano>
	<set_lange
		scene1_name="Honor room"
		scene2_name="Show Room 1"
		scene3_name="Show Room 2"
		hotspot1_name="NEW MODEL"
		hotspot2_name="Official Webiste"
		hotspot3_name="Plastic kettle series"
		hotspot4_name="Glass kettle series "
		hotspot5_name="Stainless steel kettle series"
	/>
	<include url="tour.xml" />
</krpano>

这里我们设置了set_lange元素来承载我们的语言属性。

2. 在tour.xml调用我们的语言属性
<scene 
	title="get:set_lange.scene1_name" 
>

get:set_lange.scene1_name就是我们调用语言属性的代码,其他地方一样。关于krpano的语法可以到
http://www.krpano360.com/

https://www.jqhtml.com/46046.html
学习相关的知识。

3. 在html里设置入口文件

正常情况下我们的tour.html里是这样的

embedpano({
	swf: "tour.swf",
	xml: 'tour.xml',
	target: "pano",
	html5: "auto",
	mobilescale: 1.0,
	passQueryParameters: true
});

这里就是渲染我们场景的js代码。这里我们需要改动一下,将xml: 'tour.xml'设置动态值(引入我们的语言包文件lange_cn.xml 和lange_en.xml)

比如我们用本地存储(localStorage)来记录我们当前的语言。

var tour_xml = 'lange_en.xml';
if(localStorage.getItem('lange') == 0){
    tour_xml = 'lange_cn.xml'
}
embedpano({
	swf: "tour.swf",
	xml: tour_xml,
	target: "pano",
	html5: "auto",
	mobilescale: 1.0,
	passQueryParameters: true
});

到这里就基本完成了,至于怎样切换中英文这个就不用多说了,无非就是一个点击事件。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值