百度全景图片展示-20130907

最新推荐文章于 2021-03-10 01:34:21 发布

xjwolaile

最新推荐文章于 2021-03-10 01:34:21 发布

阅读量259

点赞数

分类专栏：学习 javascript 前端技术文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/xjwolaile/article/details/84477344

版权

学习同时被 3 个专栏收录

219 篇文章 0 订阅

订阅专栏

前端技术

188 篇文章 0 订阅

订阅专栏

javascript

4 篇文章 0 订阅

订阅专栏

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>