展示地图页面 | JSAPI 4.0 | 百度地图开放平台文档中心


<!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="https://api.map.baidu.com/api?v=4.0&ak=您的密钥"></script>

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

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

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

地图需要一个 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> 标签，编写初始化代码：


// 创建地图实例，通过构造函数传入中心点和缩放级别
var map = new BMap.Map('map', {
    center: new BMap.Point(116.310, 39.992),
    zoom: 15
});

代码解释：

代码	作用
代码	作用
new BMap.Map('map', options)	创建地图实例，绑定到 id 为 map的容器，同时传入初始化选项。BMap.Map 类是整个JSAPI的核心类，大部分功能都依附地图容器。
center: new BMap.Point(116.310, 39.992)	设置初始中心点（中关村的经纬度）。BMap.Point表示一个经纬度点，是常用的基础类。
zoom: 15	设置初始缩放级别（15 级约能看到周边几条街道）

第五步：运行查看效果

双击 HTML 文件，用浏览器打开。你应该能看到一个全屏的地图，中心位于北京中关村附近。
试试这些交互：

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

DEMO详情

小结

本篇我们创建了一个全屏地图页面，通过 script 引入 JSAPI、准备容器、在 Map 构造函数中传入 center 和 zoom 完成初始化。下一篇将学习视野控制方法并添加缩放、比例尺等地图控件。

开发前准备

添加地图控件

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