百度全景图片展示-20130907

1、效果及功能说明

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

2、实现原理

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

主要的方法

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

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

var panorama = new BMap.Panorama('panorama');  

//panorama就这个方法就是定义图片全景的功能 中文意思就是：全景照片//BMap就是地图的//这段是获得一个全景照片的地图方法

3、效果图

[上传图片有问题]

4、运行环境

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

5、今天只能比较笼统的解读比分代码但是获得效果很明显

6代码

<!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">//全景图展示 BMap.Panorama('panorama') 获得一个全景照片的地图方法var panorama = new BMap.Panorama('panorama');

//这个图片方法设置他的定位方法新建一个图片旋转的效果选择的定法用经纬度来计算前面是精度后面是纬度 Point就是定义方法的方法panorama.setPosition(new BMap.Point(120.320032, 31.589666)); 

//根据经纬度坐标展示全景图 heading标题-40像素 pitch倾斜6像素panorama.setPov({heading: -40, pitch: 6});

//addEventListener 启到了监听的效果 跟bind一样的都是可以融入过个不同的方法panorama.addEventListener('position_changed', function(e){ //全景图位置改变后，普通地图中心点也随之改变    //pso的意思就是用全景照片地图的方法获得定义的方法    var pos = panorama.getPosition();    //使用map() 把每个元素通过函数传递到当前匹配集合中 居中的方法 新建一个图片旋转的效果 lng长度 lat长度的单位    map.setCenter(new BMap.Point(pos.lng, pos.lat));    //marker方法调用获得定义方法里面传有pos 获得全景照片图片定义的方法    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>

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

百度全景图片展示-20130906
1.效果及功能说明让图片实现可以360度全景的拖动效果 2.实现原理是靠着鼠标的移动让不显示出全部的图片让鼠标移动来实现全景的图片拖到那边就显示图片的那个部分主要的方法 marker.addEv ...
百度全景图片展示-20130908
1.效果及功能说明让图片实现可以360度全景的拖动效果 2.实现原理是靠着鼠标的移动让不显示出全部的图片让鼠标移动来实现全景的图片拖到那边就显示图片的那个部分主要的方法 //获得当前位置的方法 ...
【精心挑选】推荐几款非常棒的 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 ...

百度全景图片展示-20130907

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

最新文章

热门文章