百度 API 教程 001:显示地图并添加控件

news2025/2/13 15:25:05

01、基本使用

前期准备

显示地图

开启鼠标滚轮缩放地图

02、添加地图控件

添加标准地图控件

添加多个控件

网址：地图 JS API | 百度地图API SDK

01、基本使用

前期准备

注册百度账号
申请成为开发者
获取密钥：控制台 | 百度地图开放平台
选择应用类型为【浏览器】端，白名单添加localhost

打开控制台，查看申请的密钥：

显示地图

【1】新建【html】文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01-初识百度地图</title>
</head>
<body>

</body>
</html>

【2】引入百度地图API文件

<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>

【3】创建容器

<div id="container">

</div>

设置容器大小：

<style>
    #container{
        width: 100%;
        height: 600px;
    }
</style>

【4】创建地图实例

const map = new BMap.Map("container");

【5】设置中心点坐标

var point = new BMap.Point(116.404, 39.915);

【6】地图初始化，同时设置地图展示级别

map.centerAndZoom(point, 15);

【7】查看效果

开启鼠标滚轮缩放地图

map.enableScrollWheelZoom(true);

02、添加地图控件

添加标准地图控件

实现代码：

map.addControl(new BMap.NavigationControl());

如下图：

添加多个控件

实现代码：

// 等级缩放控件
map.addControl(new BMap.ScaleControl());    
// 缩略图控件
map.addControl(new BMap.OverviewMapControl());    
// 地图切换控件
map.addControl(new BMap.MapTypeControl());    
map.setCurrentCity("北京"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用

实现效果：