HTML5-百度地图接口案例
今天给大家分享一个H5中的百度地图案例，话不多说，直接上图：
在浏览器中打开之后，这个盒子有上下两部分，上面是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>