百度全景图片展示-20130906

1、效果及功能说明

让图片实现可以360度全景的拖动效果

2、实现原理

是靠着鼠标的移动让不显示出全部的图片让鼠标移动来实现全景的图片拖到那边就显示图片的那个部分

主要的方法

marker.addEventListener('dragend',function(e){    panorama.setPosition(e.point);    //拖动marker后，全景图位置也随着改变    panorama.setPov({heading: -40, pitch: 6});});

//主要是拖动鼠标后可以让图片展示出不同的效果

3、效果图

[上传图片有问题]

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、在百度全景图片山有很多就是通过封装后的方法直接上面调用，只掌握了初步的思路，还要深入的了解进去才行现在的很基础的东西明天继续研究

6、代码[html5]

<!DOCTYPE html><html><head><title>普通地图&全景图</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script></head>

<body><div id="panorama"></div><div id="normal_map"></div><style type="text/css">body, html{width: 100%;height: 100%;overflow: hidden;margin:0;}#panorama {height: 50%;overflow: hidden;}#normal_map {height:50%;overflow: hidden;}</style><script type="text/javascript">//全景图展示var panorama = new BMap.Panorama('panorama');//活的panorama.setPosition(new BMap.Point(120.320032, 31.589666)); //根据经纬度坐标展示全景图panorama.setPov({heading: -40, pitch: 6});

panorama.addEventListener('position_changed', function(e){ //全景图位置改变后，普通地图中心点也随之改变    var pos = panorama.getPosition();    map.setCenter(new BMap.Point(pos.lng, pos.lat));    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(120.320032, 31.589666);map.centerAndZoom(testpoint, 18);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></body></html>

百度全景图片展示-20130906相关推荐

百度全景图片展示-20130908
1.效果及功能说明让图片实现可以360度全景的拖动效果 2.实现原理是靠着鼠标的移动让不显示出全部的图片让鼠标移动来实现全景的图片拖到那边就显示图片的那个部分主要的方法 //获得当前位置的方法 ...
百度全景图片展示-20130907
1.效果及功能说明让图片实现可以360度全景的拖动效果 2.实现原理是靠着鼠标的移动让不显示出全部的图片让鼠标移动来实现全景的图片拖到那边就显示图片的那个部分主要的方法 marker.addEv ...
【精心挑选】推荐几款非常棒的 jQuery 全景图片展示插件
之前的文章向大家分享了实现网站功能的各种插件,今天这篇文章向大家推荐7款精心挑选的 jQuery 全景图片展示插件,同时还有非常详细的制作教程可以参考.全景图片展示是一种非常有趣的技术,通过把多张图片 ...
百度地图展示附近1公里范围内的目标
需求从DB中检索附近一公里内的数据,并在百度地图展示: Note: 主要用于从本地数据表中查询符合条件的目标: 效果展示总结 (1) 覆盖物样式设置 // 圆形覆盖物 var circle = n ...
百度Echart展示世界地图效果
1.使用百度Echarts展示世界地图效果: 2.实现代码如下: <!DOCTYPE html> <html><head><meta charset=&quo ...
地图统计_博客城市访问量统计并且通过Echarts+百度地图展示
本篇讲解一下如何在Vue 中使用 Echarts + 百度地图统计博客访问量并且通过QQWry 解析 ip 地址利用Echarts 展示出来效果图如下: 1.纯真Ip地址库 QQWry 这 ...
threejs全景图片展示
关于代码基于threejs的全景照片示例改了一下,并做简单封装.threejs的全景示例有cube和equirectangular两种,这里因为全景图片是一整张而不是多张图片拼合,故使用equire ...
百度地图--展示行政区划（省市区县）和添加多个标注点案例
百度地图JavaScript API支持HTTP和HTTPS,免费对外开放,可直接使用.接口使用无次数限制.在使用前,您需先申请密钥(ak)才可使用. 申请密钥链接: http://lbsyun.ba ...
Pannellum 360全景图片展示
1.介绍 Pannellum是用于Web的轻量级,免费和开放源代码的360全景图片查看器.它是使用HTML5,CSS3,JavaScript和WebGL构建的,没有插件. 提供了大图片切片工具gene ...

百度全景图片展示-20130906

百度全景图片展示-20130906相关推荐

最新文章

热门文章