目录
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的切换功能才能可用
实现效果：
