头像

百度地图全景图

来源:http://www.weijinfan.com/js/2693.html 18***38 2017-08-10 23:57浏览(1812) 收藏

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

程序员,你不是一个人;网站开发QQ群:35248186,在线充值,或联系QQ2589223951直接充值

查看演示 下载资源: 59 下载资源 下载积分: 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>
最新交易
评论3
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 2589223951

1 2
彩票群 www.30im.com-昨天的福利彩票结果| www.03999.cc-豪彩娱乐游戏更新器| www.832209.com-彩票c6软件下载| www.266712.com-河北快三怎么玩挣钱| www.453253.com-体彩销量城市排名| www.309318.com-广东生肖彩票| www.076559.com-褔彩3d开奖-| www.257861.com-购彩网下载-| www.405054.com-神彩争霸8邀请码| www.433.tv-足球竞彩交流| www.525961.com-香港七星彩几点停售| www.615021.com-彩票能赚钱么| www.702264.com-足彩任九全中多少钱| www.829280.com-9彩计划网-| www.936087.com-福彩中心客服电话| www.cai8892.com河北快三跨度图| www.rs52.com-安徽体彩开奖| www.638551.com-111彩票安卓| www.973314.com-温州福彩中心| www.yo3.com-网络买彩票平台| www.980410.com-福彩广西基本走势图| www.1961.club-深圳体彩店怎么申请| www.105770.com-时时彩助手苹果| www.119678.com-福彩三d今天必下| www.613582.com-网上买福彩怎么兑奖| www.8239.biz-莱利彩票有那种网站| www.428.pw-竞彩技巧贴吧| www.9572.loan-体彩排列三和制图| www.733364.com-福彩双色球规则图| www.860965.com-中国福彩算胆工具| www.941283.com-彩票套利要坐牢吗| 中国福利彩票www.3478u.cc| www.fc01.com-彩票余额修改器| www.673900.com-连云港体彩中心在哪| www.774851.com-彩神娱乐-| www.n74.club-体彩最新开奖号码| www.320417.com-快三和值最大遗漏| www.54lo.com-彩票营销策划方案| www.0378.cn-96彩票苹果-| www.802026.com-精彩大片视频播放| www.889131.com-乐和彩彩票靠谱吗| www.983264.com-网上买彩票算赌博么| www.bm56.com-手机正规彩票网站| www.80055.cc-彩票快3河北| www.818220.com-甘肃体彩中心在哪里| www.894303.com-天天彩票助手软件| www.964653.com-6701彩票网下载| 大赢家彩票www.599830.com| www.442325.com-双色球购彩大厅机选| www.1507.wang-彩虹的约定原唱是谁| www.500110.cc-2345福彩双色球| www.621309.com-云南丽江快三| www.977502.com-潘多拉8度彩妆| www.198575.com-有靠玩彩票生活的么| www.1239.top-七星彩中奖概率太低| www.006288.com-一会一开奖的彩票| www.099706.com-盈彩彩票是真是假| www.208591.com-福彩3d布衣图1| www.295579.com-十分快三是什么意思| www.370182.com-福彩中心内部号| www.480006.com-澳洲三分快三| www.685598.com-福彩3d字谜区| www.093383.com-北京体彩店-| www.278453.com-彩票靠谱吗-| www.659106.com-重庆三分彩输死| www.192000.com-湖北快三骗人| www.129189.com-好运来彩票网骗局| www.812071.com-乐彩字谜论坛| www.381643.com-私彩展示违法吗| www.525598.com-时时彩五星计划网址| www.647884.com-天天快三彩票| www.762576.com-幸运时时彩哪里的| www.915608.com-彩票挂机是骗局吗| www.cai8520.com福利彩快3怎么玩| www.382850.com-佬牛足彩今天的分析| www.554452.com-福利彩票大神推荐| www.317955.com-彩票恒等式-| www.54fa.com-赢发快三彩票网址| www.060809.com-足彩19053-| www.941514.com-亚博篮球彩票规则| 网易彩票www.095wy.com| www.05087.com-国家允许的网上彩票| www.749342.com-中彩网是假的吗| www.372613.com-上海快三和值图| www.507569.com-苏宁彩票加盟| www.586130.com-谦喜彩票计划| www.660300.com-彩6彩票登录官网| www.734445.com-展风采与展风彩| www.801722.com-广西福彩中心电话| www.868460.com-分分快三软件是什么| www.950318.com-红旗彩票网下截| www.cai989.cc-快三最大网站| www.47oj.com-南宁体育彩票销售点| www.881.xyz-买彩票止损-| www.6130.vip-今日快三出啥豹子| www.vq13.com-网上彩票软件合法吗| www.654343.com-南昌体彩中心在哪里| www.23889.com-精品计划彩票小助手| www.3717.com-迷彩免app-| www.178295.com-福彩江苏快三是什么| www.513986.com-彩票20分钟开奖| www.608865.com-吉林快三派彩链接| www.671412.com-双色球彩乐园下载| www.817993.com-足彩复式怎么投注| www.96524.com-体彩足球竞彩二等奖| www.6281.top-中发彩票破解方法| www.9922.tv-今日体彩中奖号玛| www.550633.com-买彩票中了1千万| www.545400.com-彩票机糖果大亨| www.3865.in-广州体彩中心网| www.257587.com-爱彩乐手机版下载| www.965964.com-福彩快3贴吧论坛| 大赢家彩票www.399049.com| www.4962.com-彩猫彩票个人账户| www.456145.com-玩网络彩票输钱| www.161138.com-北京福彩中心新地址| www.003587.com-为啥有钱人不买彩票| www.287379.com-体育彩票软件哪个好| www.379457.com-手机购买足球彩票| www.21667.cc-彩民之家总站| www.687741.com-彩02彩票apk| www.779126.com-福彩3d大盘图| www.018445.com-豹赢彩票是真的吗| www.122073.com-英国时时彩有官网吗| www.078106.com-中国福彩彩票代理| www.667456.com-球彩台節目表| www.2103.vip-生肖时时彩走势图| www.950922.com-新华社彩票-| www.2837.pw-好彩头平台官网| www.66925.cc-铜陵市福彩兑奖中心| www.603387.com-彩票注册网-| www.543849.com-今天福彩3d一版图| www.la5.com-大发快三怎么赚钱| www.pb65.com-福彩2d中奖规则表| www.91674.com-好彩什么颜色好抽| www.009913.cc-华彩论坛-| www.119306.com-亿彩彩票钱提现不了| www.86763.com-竞彩猫女主持人小暖| www.4337.vip-彩票兑换app| www.345506.com-网络买彩票-| www.811526.com-竞彩足球加奖app| www.903920.com-花式休闲快三分解| www.974387.com-大豪门彩票网址| 大赢家彩票www.534211.com| www.jd16.com-足彩竞猜结果| www.c51.club-幸运快三是私彩吗| www.29tx.com-3d彩票第三-| www.501669.com-彩票盘口出租平台| www.ag77.cc-河南福彩快三遗漏值| www.931811.com-电台足彩推荐骗局| www.965291.com-家彩网开奖结果报码| www.815198.com-福彩彩票机键盘图| www.48ue.com-高频彩黑平台曝光| www.787910.com-足彩销售额查询| www.912087.com-彩票站买私彩| www.g67.club-新万彩吧资料| www.80gq.com-福利彩票扫码摇大奖| www.865931.com-彩票123是真的吗| www.925898.com-彩票机怎么申请| www.974663.com-七星彩坛论-| 500彩票www.849077.com| www.tc75.com-澳洲时时彩开奖网站| www.030748.com-大大彩票是骗局吗| www.757583.com-体彩刮刮乐7乐无穷|