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

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

<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>

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

uni-app 中微信小程序使用高德地图等第三方 SDK的方法
获取SDK 首先在高德开放平台,注册账号并且申请相关的 key 等信息: 然后下载它的微信小程序版 SDK:微信小程序 SDK 然后填写app包名,申请原生sdk的appkey信息,但不需要下载原生s ...
在uniapp 中使用百度统计【精华版】
一. 百度统计官网百度统计的地址二.百度统计添加域名: 三. 安装百度统计的代码: 这是百度统计的核心代码` 在uniapp 中全局使用获取网址的站点id 站点id 是在二级目录的: 网站概况的 ...
uniapp中使用photo-sphere-viewer.js实现全景VR图
最近项目中要求vr功能,可以进行图片的全景查看,在此,用到了vue里的一个实现全景预览的插件:photo-sphere-viewer.js.这些插件,在uniapp中不能直接用.不过uniapp有个组 ...
uni-app 中实现位置授权以及打开地图选择位置功能
最近在项目中遇到一个要用户授权位置且可以用户自己选择位置的功能,看起来好像很难,其实并不难,我在网上看了一些优秀博主的博客,只要跟着步骤一步步来就能实现,下面是我在实现该功能后做的一次总结,希望能帮到 ...
在移动设备中创建ArcGIS API for JavaScript地图应用程序
本教程将演示如何通过响应式移动专用布局窗口小部件创建移动友好的webapp 1.支持的设备这个模板支持安卓和IOS横向和纵向姿态,它使用Dojo Mobile框架并包含Dojo标题窗口等小部件. 2 ...
uniapp中使用百度名片识别接口或名片全能王识别接口
scan() {var me = this;uni.chooseImage({count: 1,sizeType: ['compressed'],sourceType: ['album', 'came ...
uni-app 使用Echarts展示折线图（axisLabel展示不全）以及uCharts展示圆环图（附代码）（仅支持H5 和APP）
项目过程中发现Echarts 使用时日期展示有很大问题如图所示左右提示文字以及下方日期均展示不全(使用的逍遥模拟器).原因是因为xAxis.yAxis 对象中的axisLabel对象使用了 f ...
Uniapp中使用高德地图，并在android studio中离线打包
Uniapp中使用高德地图,并在android studio中离线打包带高德地图功能的Uniapp的android离线打包 1. Uniapp中使用高德地图的方式 2. 高德地图中申请key 3. ...
MVC项目中使用百度地图
已经很久没更新博客了,因为最近一直在学习前端的知识,没那么多时间,写博客或者写文章不但没有钱,写得好还好说,如果写得不好,一些吃瓜群众,不仅要喷你,搞不好还要人身攻击就不好了.所以写博客的人,脸皮得厚 ...

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

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

最新文章

热门文章