参考考自:http://developer.baidu.com/map/index.php?title=jspopular
<!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=l3C10fsLaG2F3AZ0dOiVBeUU"></script>
<style type="text/css">
body,html {
width: 400px;
height: 300px;
overflow: hidden;
margin: 0;
}
#panorama {
height: 100%;
overflow: hidden;
}
#normal_map {
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="change_btn">
<label id="normal_map_btn" style="background:#2987c4">普通地图</label>
<label id="panorama_btn" style="background:#999">全景地图</label>
</div>
<div id="panorama" style="visibility: hiden; display: none"></div>
<div id="normal_map" style="visibility: visible; display: block;background:#2987c4"></div>
<script>
var lon = 116.32955
var lat = 39.96692
</script>
<script type="text/javascript" src="/web/Public/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
// 用户登录页面 覆盖
$("#panorama_btn").click(function() {
$("#panorama").css({
"visibility" : "visible",
"display" : "block"
});
$("#normal_map").css({
"visibility" : "hiden",
"display" : "none"
});
$("#normal_map_btn").css({
"background" : "#999"
});
$("#panorama_btn").css({
"background" : "#2987c4"
});
});
$("#normal_map_btn").click(function() {
$("#normal_map").css({
"visibility" : "visible",
"display" : "block"
});
$("#panorama").css({
"visibility" : "hiden",
"display" : "none"
});
$("#normal_map_btn").css({
"background" : "#2987c4"
});
$("#panorama_btn").css({
"background" : "#999"
});
});
var testpoint = new BMap.Point(lon, lat);
//全景图展示
var panorama = new BMap.Panorama('panorama');
panorama.setPosition(testpoint); //根据经纬度坐标展示全景图
panorama.setPov({
heading : -40,
pitch : 6
});
panorama.addEventListener('position_changed', function(e) { //全景图位置改变后,普通地图中心点也随之改变
var pos = panorama.getPosition();
map.setCenter(new BMap.Point(pos.lng, pos.lat));
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);
map.centerAndZoom(testpoint, 14);
map.enableScrollWheelZoom();//允许鼠标滚轮缩放
map.highResolutionEnabled();//开启高分辨率
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
});
});
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
</script>
</body>
</html>