展示地图页面 | 百度地图API SDK


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>周边景点检索</title>
</head>
<body>
</body>
</html>

这是一个标准的 HTML5 页面。viewport meta 标签确保在移动端也能正确显示。

第二步：引入百度地图 JSAPI

在 <head> 标签中，添加 JSAPI 的 script 引入：


<script src="//huiyan.baidu.com/bmapgltest/?v=4.0&ak=YOUR_AK"></script>

将 YOUR_AK 替换为你在上一篇中获取的 AK。
参数说明：

v=4.0 —— API 版本号
ak=xxx —— 你的应用密钥

第三步：添加地图容器和样式

地图需要一个 DOM 容器来渲染。我们创建一个 div，并让它占满整个页面：


<style>
    html, body { margin: 0; padding: 0; width: 100%; height: 100%; }
    #map { width: 100%; height: 100%; }
</style>

在 <body> 中添加容器：


<div id="map"></div>

第四步：初始化地图

在容器 div 下方添加 <script> 标签，编写初始化代码：


// 创建地图实例，参数为容器 div 的 id
var map = new BMap.Map('map');

// 设置中心点和缩放级别（必须调用，否则地图不显示）
map.centerAndZoom(new BMap.Point(116.310, 39.992), 15);

// 启用鼠标滚轮缩放
map.enableScrollWheelZoom();

代码解释：

代码	作用
代码	作用
new BMap.Map('map')	创建地图实例，绑定到 id 为 map的容器
new BMap.Point(116.310, 39.992)	创建一个坐标点（中关村附近的经纬度）
map.centerAndZoom(point, 15)	设置地图中心和缩放级别（15 级约能看到周边几条街道）
map.enableScrollWheelZoom()	允许通过鼠标滚轮缩放地图

第五步：运行查看效果

双击 HTML 文件，用浏览器打开。你可以看到一个“中心位于北京中关村附近”的全屏地图。
你也可以试试以下这些交互，感受地图的效果：

鼠标拖拽移动地图
滚轮缩放地图
双击放大地图

DEMO详情

小结

本篇我们创建了一个全屏地图页面，通过 script 引入 JSAPI、准备容器、调用 centerAndZoom 完成初始化。下一篇将学习视野控制方法并添加缩放、比例尺等地图控件。

开发前准备

JSAPI加载方式

本篇文章对您是否有帮助？