首先需要新建一个js
bMap.js
export function map(()=>{
//由于要执行引入的script加载,所以要执行init每次引用次方法都触发
window.init=(()=>{
//传入使用当前方法,resolve执行成功返回结果then向下执行
resolve(map);
})
return new Promise(()=>{
let mapTag=document.creatElement('script');
mapTag.type="text/javascript";
//若此地址写错则不会有任何响应,
mapTag.src=`http://api.map.baidu.com/api?v=2.0&ak=${apk}&callback=init`;
mapTag.οnerrοr=reject;
document.head.appendChild(mapTag);
})
}
html
<view><view style="height:400px;width:800px;" class="position-relative boxDt m-auto" ><view id="allPanoramaPicture" v-show="univerSityData.length>0" ></view></view></view>
js
<script>import {bMap} from 'until/bMap.js'export default(){data(){return{univerSityData:[],}},onLoad(e){uni.getSystemInfo({success:res=>{this.widths=res.windowWidth}})this.univerSityId=e.id;this.searchQjtJwD();},methods(){//切换全景地图切换//切换其他不同全景地图时需要删除上一个标签,创建新的标签selectTap(val){document.getElementById('allPanoramaPicture').remove();let zhi=document.createElement('uni-view');zhi.setAttribute('id','allPanoramaPicture');zhi.setAttribute('class','margin-top');zhi.setAttribute('style','height:100vh;width:'+this.widths+'px');document.querySelector('.boxDt').appendChild(zhi);this.typeId=val.id;this.selectData=val;this.show=false;this.typeName=val.name;this.yxPicture();},searchQjtJwD(){this.loadingDt=true;this.$axios.post('/mgr/uni/map',{id:this.univerSityId}).then((res)=>{if(res.status){this.loadingDt=false;this.univerSityData=res.data;this.typeId=res.data[0].id;this.selectData=res.data[0];this.typeName=res.data[0].name;console.log(res.data);if(res.data.length>0){this.yxPicture();}else{}}else{this.loadingDt=false;}})},yxPicture(){console.log(this.selectData.lat);// 如需要弹窗授权,请写在此处bMap(apk).then((mymap) => {var panorama = new BMap.Panorama('allPanoramaPicture'); //默认为显示导航控件panorama.setPosition(new BMap.Point(this.selectData.lnt,this.selectData.lat));panorama.addEventListener('position_changed', function(e){ //全景位置改变事件panoramaCallBack(e);});panorama.addEventListener('pov_changed', function(e){ //全景视角改变事件panoramaCallBack(e);});//返回相应结果function panoramaCallBack(e){ console.log(e); } })}}
</script>