百度全景图/内景图切换示例

先看效果：

外景图

内景图：

具体代码：

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><style type="text/css">body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}#panorama {width:100%; height: 700px;}#normal_map {height:30%;overflow: hidden;}</style><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=nM6b0uVs6gIEduv79AbvO8FhvB4OIuWe"></script><title>显示/隐藏室内景切换控件</title>
</head>
<body><div id="panorama"></div><a title="退出室内景" id="sn" style="display:none;z-index: 1201; position: absolute;right: 60px;top:10px;width: 89px;cursor: pointer;height: 40px;line-height:40px;color: #ebedf0;border-radius: 3px;background-color: rgba(37,37,37,.9);background-image: url(http://api0.map.bdimg.com/images/panorama/indoor_exit.png);background-repeat: no-repeat;background-position: 15px 12px;"><span style="margin-right: 12px; float: right;">出口</span></a><div id="normal_map"></div>
</body>
</html>
<script type="text/javascript">var point = new BMap.Point(108.907521,34.252937);var i=0;var panorama = new BMap.Panorama('panorama'); //全景室内景切换控件默认为显示panorama.setId('09021500121707230958068052D');panorama.setPov({pitch: -7.624776772858846, heading: 274.0812660194958});var labelPosition = new BMap.Point(108.907521,34.252937);var labelOptions = {position: labelPosition,altitude:-38.35447149293418};//设置标注点的经纬度位置和高度var label = new BMap.PanoramaLabel('丰庆公园入口', labelOptions);panorama.addOverlay(label);//在全景地图里添加该标注label.addEventListener('click', function() { //给标注点注册点击事件i=1;panorama.setOptions({albumsControl: true });panorama.setId('0802150000150210110732050UZ');label.hide();document.getElementById("sn").style.display='block';});document.getElementById("sn").onclick = function(){ i=0panorama.setId('09021500121707230958068052D');document.getElementById("sn").style.display='none';label.show();panorama.setOptions({albumsControl: false });};panorama.addEventListener('error', function () {alert('该区域没有全景地图！');panorama.hide();document.getElementById("panorama").style.display='none';document.getElementById("normal_map").style.height='100%';});panorama.addEventListener('noresult', function () {alert('该区域没有全景地图！');panorama.hide();document.getElementById("panorama").style.display='none';document.getElementById("normal_map").style.height='100%';});panorama.addEventListener('position_changed', function(e){ //全景图位置改变后，普通地图中心点也随之改变if(i==1){return;}var pos = panorama.getPosition();point=new BMap.Point(pos.lng, pos.lat);map.setCenter(point);marker.setPosition(pos);});//普通地图展示var mapOption = {mapType: BMAP_NORMAL_MAP,maxZoom: 18,drawMargin:0,enableFulltimeSpotClick: true,enableHighResolution:true}var map = new BMap.Map("normal_map", mapOption);
//      var testpoint = new BMap.Point(118.097998, 24.484298);var testpoint = point;map.centerAndZoom(testpoint, 18);map.enableScrollWheelZoom(true);// 覆盖区域图层测试map.addTileLayer(new BMap.PanoramaCoverageLayer());var marker=new BMap.Marker(testpoint);marker.enableDragging();map.addOverlay(marker);  marker.addEventListener('dragend',function(e){panorama.setPosition(e.point); //拖动marker后，全景图位置也随着改变panorama.setPov({heading: -40, pitch: 6});});</script>

百度全景图/内景图切换示例相关推荐

CSS精灵图代码示例
什么是css Sprite 当用户访问一个网站时,浏览器会向服务器发送一系列请求,比如说网页上的每张图像都需要经过一次请求才能最终展示给用户.然而,一个网页中往往包含大量的图像资源(例如在页面中展示的 ...
swiper轮播图切换指示点改变背景颜色
swiper 官方api文档:https://www.swiper.com.cn/api/index.html 如果有一个页面中需要引用多个Swiper,可以给每个容器加上ID或Class区分,但是需 ...
百度以图搜图API介绍
摘要: 使用Google或Baidu的以图搜图搜索女神的头像,便可尽收网络上该女神的所有"隐私"...,以图搜图隐私问题突出,各家都没有公开公共API,但多想想还是有办法的. 作者 ...
【微信开发】-发送位置获取周边信息及生成百度全景静态图API，主要代码在private function receiveLocation($object)
百度地图全景静态图API与静态图API类似,可轻松实现将全景地图以图片形式嵌入到您的应用中.您只需要设置图片尺寸.经纬度坐标等参数,发送HTTP请求访问百度地图全景静态图服务,便可在您的PC浏览器.手 ...
python机器学习可视化工具Yellowbrick介绍及平行坐标图实战示例
python机器学习可视化工具Yellowbrick介绍及平行坐标图实战示例目录 python机器学习可视化工具Yellowbrick介绍及平行坐标图实战示例 yellowbrick简介及安装
一款jQuery满屏自适应焦点图切换特效
一款jQuery满屏自适应焦点图切换特效 ,自适应当前浏览器的宽度,可以作为网站整个大背景的却换效果,很不错的一款不jquery特效. 兼容性没的说直接秒杀了IE6.适用浏览器:IE6.IE7.IE8 ...
圆形和多边形雷达图python-Matplotlib绘制雷达图和三维图的示例代码
1.雷达图程序示例 '''1.空白极坐标图''' import matplotlib.pyplot as plt plt.polar() plt.show() '''2.绘制一个极坐标点''' im ...
python 画三维函数图-如何用Matplotlib 画三维图的示例代码
最基本的三维图是由(x, y, z)三维坐标点构成的线图与散点图,可以用ax.plot3D和ax.scatter3D函数来创建,默认情况下,散点会自动改变透明度,以在平面上呈现出立体感三维的线图和散 ...
python画三维立体图-如何用Matplotlib 画三维图的示例代码
用Matplotlib画三维图最基本的三维图是由(x, y, z)三维坐标点构成的线图与散点图,可以用ax.plot3D和ax.scatter3D函数来创建,默认情况下,散点会自动改变透明度,以在平 ...

百度全景图/内景图切换示例

百度全景图/内景图切换示例相关推荐

最新文章

热门文章