在Vue项目中加载krpano全景图
在Vue-cli项目中做krpano全景图编辑器的时候,由于js插件的路径是动态的，做的过程中遇到了加载不到资源的难题,在网上搜索了好久也没找到合适的办法,最后想到了可能是JS加载的问题,于是解决了问题,下面跟大家分享一下做法。首先, 在vue的路由页面中加载动态的js插件,需要等待JS文件加载完成之后,才能使用JS插件中的方法来加载全景图:// 加载动态JS文件
var _doc = document.getElementsByTagName('head')[0];
var js = document.createElement('script');
js.setAttribute('type', 'text/javascript');
js.setAttribute('src', jsUrl);
// jsUrl是JS文件的路径
_doc.appendChild(js);
// 下面是加载全景图, 针对不同浏览器做兼容
if (document.all) { //如果是IE
js.onreadystatechange = function () {
if (js.readyState == 'loaded' || js.readyState == 'complete') {
embedpano({// js插件中的方法，用于加载全景图
swf: that.tourSwfUrl,
xml: that.tourXmlUrl,
target: "pano",
html5: "always",
mobilescale: 1.0,
passQueryParameters: true
});
that.krpano = document.getElementById("krpanoSWFObject");
}
}
}
else {
js.onload = function () {
embedpano({
swf: this.tourSwfUrl,// krpano全景图的swf文件路径
xml: this.tourXmlUrl,// krpano全景图的xml文件路径
target: "pano",
html5: "auto",
mobilescale: 1.0,
flash: 'auto',
passQueryParameters: true
});
this.krpano = document.getElementById("krpanoSWFObject")// 保存全景图对象
}
}然后就是将全景图显示在页面上
【在Vue项目中加载krpano全景图】这样全景图就能顺利加载出来了，第一次做前端知识分享，有不妥之处欢迎留言，谢谢！
推荐阅读
- 你到家了吗
- 闲杂“细雨”
- 杜月笙的口才
- 赢在人生六项精进二阶Day3复盘
- 祖母走了
- 樱花雨
- 眼观耳听美食的日子
- vue-cli|vue-cli 3.x vue.config.js 配置
- “成长”读书社群招募
- 眉头开了