百度地图全景图

一款百度地图全景图的特效，可以点击右侧的导航菜单切换不同的地点，然后再点击地点上面的全景图的摄像头小图标进入全景图，整体的效果还是不错的，喜欢的童鞋请收下吧。

分类：导航菜单 > 分类导航难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，远程调用jQuery库，接入百度地图的API，引入百度地图的JS文件，设置好页面元素的样式，代码如下：

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script src="http://api.map.baidu.com/api?v=2.0&ak=A1LU7iHS0avqQwPLAxbhKn0UYSQCuRVH"></script>
<script type="text/javascript" src="js/jquery.baiduMap.min.js"></script>
<style type="text/css">
* { margin: 0; padding: 0; }
a { text-decoration: none; }
ul { list-style: none; }
body,  html { height: 100%; font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif; }
.box { width: 100%; height: 600px; margin: 40px 0; }
#container1,  #container2 { width: 100%; height: 100%; }
#container3 { width: 80%; height: 100%; }
.list { width: 20%; height: 100%; background: #eee; }
.list li { height: 34px; line-height: 34px; padding-left: 20px; }
.list li.active a { color: red; }
.title { font-size: 14px; font-weight: bold; color: #cc5522; }
.content { font-size: 13px; color: #333; margin-top: 6px; }
.fl { float: left; }
</style>

页面的body部分，多个div容器用来放导航菜单和地图，代码如下：

<div class="box">
  <div id="container3" class="container fl"></div>
  <ul class="list fl">
    <li> <a href="javascript:void(0)">厦门中山公园</a> </li>
    <li> <a href="javascript:void(0)">厦门实验小学</a> </li>
    <li> <a href="javascript:void(0)">厦门光明大厦</a> </li>
    <li> <a href="javascript:void(0)">厦门将军祠</a> </li>
    <li> <a href="javascript:void(0)">厦门古龙商城</a> </li>
  </ul>
</div>
<div class="box">
  <div id="container1"></div>
</div>
<div class="box">
  <div id="container2"></div>
</div>

页面的底部，设置好需要显示的多个地点的参数，实例化百度地图，代码如下：

<script type="text/javascript">
var points = [{
	id: 1,
	lng: 118.096525,
	lat: 24.462602,
	title: "厦门中山公园",
	content: ["地址：北京市新建宫门路19号", "电话：010-62881144"]
}, {
	id: 2,
	lng: 118.095231,
	lat: 24.461615,
	title: "厦门实验小学",
	content: ["地址：北京市后花园风景区", "电话：010-69768087"]
}, {
	id: 3,
	lng: 118.092644,
	lat: 24.468522,
	title: "厦门光明大厦",
	content: ["地址：北京市东城区景山前街4号", "电话：010-65131892"]
}, {
	id: 4,
	lng: 118.106586,
	lat: 24.467207,
	title: "厦门将军祠",
	content: ["地址：北京市东城区天坛东里甲1号", "电话：010-67013036"]
}, {
	id: 5,
	lng: 118.108526,
	lat: 24.474245,
	title: "厦门古龙商城",
	content: ["地址：北京市西城区文津街1号(故宫北)", "电话：010-64040610"]
}];

new BaiduMap({
	id: "container1",
	level: 16,
	titleClass: "title",
	contentClass: "content",
	centerPoint: { // 地图中心点经纬度
		lng: 118.106586,
		lat: 24.467207
	},
	index: -1,
	points: points,
	showLabel: true
});

new BaiduMap({
	id: "container2",
	level: 16,
	type: ["地图", "卫星"],
	width: 320,
	height: 70,
	titleClass: "title",
	contentClass: "content",
	showMarkPanorama: true,
	mapStyle: "light",
	icon: {
		url: "img/marker.png",
		width: 25,
		height: 96
	},
	centerPoint: { // 地图中心点经纬度
		lng: 118.106586,
		lat: 24.467207
	},
	index: 0,
	points: points
});

var map = new BaiduMap({
	id: "container3",
	level: 16, //  选填--地图级别--(默认15)
	zoom: true, // 选填--是否启用鼠标滚轮缩放功能--(默认false)
	type: ["地图", "卫星", "三维"], // 选填--显示地图类型--(默认不显示)
	width: 320, // 选填--信息窗口width--(默认自动调整)
	height: 70, // 选填--信息窗口height--(默认自动调整)
	titleClass: "title",
	contentClass: "content",
	showPanorama: true, // 是否显示全景控件(默认false)
	showMarkPanorama: true, // 是否显示标注点全景图(默认false)
	showLabel: false, // 是否显示文本标注(默认false)
	mapStyle: "normal", // 默认normal,可选dark,light
	icon: { // 选填--自定义icon图标
		url: "img/marker2.png",
		width: 34,
		height: 94
	},
	centerPoint: { // 中心点经纬度
		lng: 118.106586,
		lat: 24.467207
	},
	index: 3, // 开启对应的信息窗口，默认-1不开启
	animate: true, // 是否开启坠落动画，默认false
	points: points, // 标注点--id(唯一标识)
	callback: function(id) {
		$(".list").find("li").eq(id - 1).addClass("active").siblings().removeClass("active");
	}
});

var data = map.getPosition();
var $li = $(".list").find("li");

$li.each(function(i) {
	$(this).data("id", i + 1);
}).on("click", function() {
	map.openInfoWindow($(this).data("id"));
	$(this).addClass("active").siblings().removeClass("active");
}).eq(data.id - 1).addClass("active");
</script>