今天給大家分享一個H5中的百度地圖API案例，話不多說，直接上圖：
在瀏覽器中打開之後，這個盒子有上下兩部分，上面是3D地圖，下面是普通地圖，這是使用了百度地圖接口後的效果，使用百度地圖接口必須拿到百度地圖的密鑰，密鑰博主已經在代碼中給出，可以直接使用，密鑰也可以自己去申請。
代碼如下：
<!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= DarF2LCCGzn6T16zgy8ZPkvYYE5CT6fu"></script>
<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>
</head>
<body>
<div id="panorama"></div>
<div id="normal_map"></div>
<script type="text/javascript">
//全景圖展示
var panorama = new BMap.Panorama('panorama');
panorama.setPosition(new BMap.Point(116.404125, 39.91405)); //根據經緯度座標展示全景圖
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);
var testpoint = new BMap.Point(116.404125, 39.91405);
map.centerAndZoom(testpoint, 18);
var marker = new BMap.Marker(testpoint);
marker.enableDragging();
map.addOverlay(marker);
map.enableScrollWheelZoom(true);
map.addControl(new BMap.MapTypeControl());
marker.addEventListener('dragend', function (e) {
panorama.setPosition(e.point); //拖動marker後，全景圖位置也隨着改變
panorama.setPov({heading: -40, pitch: 6});
}
);
</script>
</body>
</html>