百度全景图片展示-20130908

最新推荐文章于 2024-11-08 16:09:18 发布

xjwolaile

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量209

点赞数

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

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

版权

学习同时被 3 个专栏收录

219 篇文章 0 订阅

订阅专栏

前端技术

188 篇文章 0 订阅

订阅专栏

javascript

4 篇文章 0 订阅

订阅专栏

1、效果及功能说明

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

2、实现原理

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

主要的方法


//获得当前位置的方法 变量里面是经纬度 后的18 是地图层级的规划 数字越小图片显示的地方就越大 数字越大地图显示的就越小
map.centerAndZoom(new BMap.Point(120.141938,30.305558), 18);

local.searchInBounds("公司", map.getBounds());

//定义全图监听方法
map.addEventListener("dragend",function(){
	//调用完整的全图
    map.clearOverlays();
    //展示出 所查询的关键字的内容
    local.searchInBounds("公司", map.getBounds());
});

3、效果图

[img]http://dl2.iteye.com/upload/attachment/0089/1112/4e04379d-c32e-3c30-a17c-007f69de9314.jpg[/img]

4、运行环境

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

5、代码


<!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,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=54794f87ceb2aa2c191bd02d50a536ab"></script>
<title>可视区域内的搜素</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">

// 百度地图API功能 这个是获得一个全图的方法
var map = new BMap.Map("allmap");
//获得当前位置的方法 变量里面是经纬度 后的18 是地图层级的规划 数字越小图片显示的地方就越大 数字越大地图显示的就越小
map.centerAndZoom(new BMap.Point(120.141938,30.305558), 18);

//这里是一个搜索地图的方法
var local = new BMap.LocalSearch(map, {
  //这里是设定搜索地图的方法 范围是全图 那么怎么设定大小 就是上面的 18层级在这个层级里面能显示大的地方的多少地图
  renderOptions:{map: map}
});
//这是搜索关键词 公司就是关键词 后调用全图的 Bounds获得搜索的范围方法
local.searchInBounds("公司", map.getBounds());

//定义全图监听方法
map.addEventListener("dragend",function(){
	//调用完整的全图
    map.clearOverlays();
    //展示出 所查询的关键字的内容
    local.searchInBounds("公司", map.getBounds());
});
</script>