虽然百度官方文档已经写的很清楚了，在这里我还是给大家介绍一下，章节大量借鉴百度官方文档说明。
第一、首先，我们要准备一个HTML容器用来显示地图，这里选用一个div元素，同时设置好宽度和高度。代码如下：
<div id="allmap" style="width:600px;height:400px;"></div>
第二、根据HTML标准，每一份HTML文档都应该声明正确的文档类型，我们建议您使用最新的符合HTML5规范的文档声明：
<!DOCTYPE html>
您也可以根据需要选择其他类型的文档声明，这样浏览器会以标准的方式对页面进行渲染，保证页面最大的兼容性。我们不建议您使用quirks模式进行开发。
下面我们添加一个meta标签，以便使您的页面更好的在移动平台上展示。
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
第三、引入百度地图api的js库，就像我们页面如果想使用jquery一样需要引入jquery的js库
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
js中"你的秘钥"就是指我们在上一章节申请的ak，如下图
第四、创建地图并初始化
创建地图容器元素 地图需要一个HTML元素作为容器，这样才能展现到页面上。这里我们创建了一个div元素。
命名空间 API使用BMap作为命名空间，所有类均在该命名空间之下，比如：BMap.Map、BMap.Control、BMap.Overlay。
在第一步我们在页面中已经创建了一个id为allMap的div地图容器。
var map = new BMap.Map("allmap"); // 创建Map实例位于BMap命名空间下的Map类表示地图，通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象。
注意在调用此构造函数时应确保容器元素已经添加到地图上。
创建点坐标
var point = new BMap.Point(116.404, 39.915);
这里我们使用BMap命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点，其中116.404表示经度，39.915表示纬度。
东经116.404度，北纬39.915度大约是在天安门的位置，当然经纬度后面的位数越多越能精确的表示一个点，级别给11，现在会在浏览器看到这个效果：
地图初始化
map.centerAndZoom(point, 11);
在创建地图实例后，我们需要对其进行初始化，BMap.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。 地图必须经过初始化才可以执行其他操作。
展示级别告诉API以多大的比例显示地图。在初中地理课上学过，地图是有比例尺的，比例尺通常会告诉地图上一厘米代表实际多少公里。地图API也如此，但是它是以像素作为基准的，不同的级别下每个像素所代表的米数是不同的，级别越高每像素等于的米数就越少，反之则越大。视觉上看就是级别越高地图越详细。目前百度地图支持的级别范围是1到19，在19级下，地图上一个像素表示0.5米。
第五、完整的jsp代码如下
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<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=2.0&ak=LsLOGrVLe7iEUaWFxGfwaGwW"></script>
<title>地图展示</title>
</head>
<body>
<div id="allmap" style="width:600px;height:400px;"></div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能 www.vxzsk.com V型知识库原创
var map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
</script>
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程