krpano实现多语言切换

喜欢ヅ旅行 2023-02-13 11:23 43阅读 0赞

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

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

> 这里在根目录下创建

中文语言包 `lange_cn.xml`

中文语言包 `lange_en.xml`

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

#### 2. 在tour.xml调用我们的语言属性 ####

`get:set_lange.scene1_name`就是我们调用语言属性的代码，其他地方一样。关于krpano的语法可以到  
[http://www.krpano360.com/][http_www.krpano360.com]  
和  
[https://www.jqhtml.com/46046.html][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
    });

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

[http_www.krpano360.com]: http://www.krpano360.com/
[https_www.jqhtml.com_46046.html]: https://www.jqhtml.com/46046.html