以下是最简单的百度地图的应用，还有许多功能有待学习，可以百度搜索“百度Api”进行实例学习
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>百度地图显示</title>
<!--css代码-->
<style type="text/css">
body, html,#allmap
{
width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";
}
</style>
<!--调用百度接口-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
</head>
<body>
<!--地图显示-->
<div id="allmap"></div>
</body>
</html>
<!--javascript代码-->
<script type="text/javascript">
//百度地图API功能
var map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(118.6,32.11 ), 10); // 初始化地图,设置中心点坐标和地图级别,以南京为地图中心
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
map.addControl(new BMap.ScaleControl({ anchor: BMAP_ANCHOR_TOP_LEFT })); // 左上角，添加比例尺
map.addControl(new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL })); //右上角，仅包平 移和缩放按钮
map.addControl(new BMap.NavigationControl()); //左上角，添加默认缩放平移控件
map.addControl(new BMap.OverviewMapControl()); //添加默认缩略图
map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT })); //打开缩略图
map.addOverlay(new BMap.Marker(new BMap.Point(118.6, 32.11))); //添加标注
</script>
效果如图所示：
