在网页中嵌入百度地图
本例将带领您在网页中插入百度地图。
Step1 创建一个页面BaiduMap.html，添加地图容器
从零开始，您可以：
- 先创建一个页面BaiduMap.html
- 然后在页面中创建一个用于显示地图的容器：一个div，并设置id = "map"
- 定义样式，如高度设为600px
<!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>
body, html, #allmap
{
width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";
}
</style>
<title>BaiduMap</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
Step2 引入在线JS库
在</head>标签前，加入引用的脚本。在使用百度地图前，您需要先注册百度的开发账户，并获取需要的ak。有了ak就可以引入JS可以了。 具体如下所示：
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=95a21d20cfe4df8d03f267282e62d8ae"></script>
其中，SuperMap.Include.js是SuperMap Online提供的在线脚本，可以很方便地嵌入地图。
Step3 在页面中插入百度地图
创建Map实例，初始化地图并指定显示的中心点坐标和地图级别以及城市。一般情况下，地图都需要支持鼠标缩放，所以还需要开启enableScrollWheelZoom。代码如下：
<script>
var map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图，设置中心点坐标和地图级别
map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
</script>
在线演示与源码编辑
将BaiduMap.html保存后，直接在浏览器中打开这个页面，您就可以开始浏览嵌入的百度地图。 您也可以通过在线体验的方式，直接在线编辑源码并实时查看演示效果。