uniapp中使用百度API实现全景地图(仅支持H5)

el/2023/12/3 3:19:59

首先需要新建一个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>


http://www.ngui.cc/el/3419113.html

相关文章

ajax上传文件及监听进度 PC端或H5

if(this.loadingStep!0){uni.showToast({icon:none,title:上一张图片暂未完成})return false;} var input document.createElement(input);input.type file;input.acceptimage/*; document.getElementById(upFile).appendChild(input);// this.$refs.input.appendChild(inp…

uniapp打包H5相关配置

在pages.json页如果tabBar设置的icon是png不是字体图标则从app切换h5打包后需要修改图片path路径&#xff1a; app的iconPath或selectedIconPath是获取当前项目文件下&#xff1a;static/images/tab/mine.png h5使用的时候需要改为外部链接地址图片&#xff1a;http://xxx/xx…

uniapp配置权限

在登录的时候后端接口查出当前用户可进入页面路由的数组 let dataList[{name:first,uri:/1},{name:second,uri:/2},{name:third,uri:/3},{name:four,uri:/4} ] 前端在每个页面的详情页执行验证&#xff0c;如果当前的路由不包含返回的数组中的内容则出现蒙板 前端获取当前页…

uniapp后端配置升级

升级选择原生app制作wgt生成wgt文件后上传到OSS,后端数据库修改url及version即可&#xff0c;将status改为上线

用一行CSS分别实现10种现代布局

01、超级小中 在没有和flex grid之前&#xff0c;垂直居中一直不能很优雅的实现。而现在&#xff0c;可以结合我们grid和place-items优雅的实现同时水平居中和垂直居中。 <div class"parent blue" > <div class"box coral" contenteditable>…

css filter的神奇用途

背景 基本概念 CSS filter 属性将模糊或颜色偏移等图形效果应用于元素形成滤镜&#xff0c;滤镜通常用于调整图像&#xff0c;背景和边框的渲染。它的值可以为 filter 函数 或使用 url 添加的svg滤镜。 filter: []* | none filter: url(file.svg#filter-element-id) 可以用…

10个实用技巧让你的 Vue 代码更优雅

前言&#x1f34a; 作为深度代码洁癖&#xff0c;我们都希望能写出简单高效的代码&#xff0c;让我们的代码看起来更加优雅&#xff0c;让我们抛弃繁杂的代码&#xff0c;一起开启简单的旅程~~ slots 新语法向 3.0 看齐 ❝ 使用带有“&#xff03;”的新命名插槽缩写语法,在V…

前端经典面试题 ( 60道前端面试题包含 JS、CSS、React、网络、浏览器、程序题等)

简答题 1、什么是防抖和节流&#xff1f;有什么区别&#xff1f;如何实现&#xff1f; 参考答案 防抖 触发高频事件后n秒内函数只会执行一次&#xff0c;如果n秒内高频事件再次被触发&#xff0c;则重新计算时间 思路&#xff1a; 每次触发事件时都取消之前的延时调用方法 f…

100个javascript片段

实现字符串长度截 function cutstr(str, len) { var temp; var icount 0; var patrn /[^\x00-\xff]/; var strre ""; for (var i 0; i < str.length; i) { if (icount < len - 1) { …