百度地图简单示例
1 调用官方API
打开百度地图开放平台
百度地图开放平台
2 创建一个应用
输入名字：uil（取一个好听的名字）
应用类型：浏览器端（这里为了方便）
白名单：*（允许谁访问）
3 查看自己创建的应用
4 进入API
初学建议看官方文档
5 官方示例DEMO
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>地图展示</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<style>
body,
html,
#container {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
font-family: "微软雅黑";
}
.info {
z-index: 999;
width: auto;
min-width: 22rem;
padding: .75rem 1.25rem;
margin-left: 1.25rem;
position: fixed;
top: 1rem;
background-color: #fff;
border-radius: .25rem;
font-size: 14px;
color: #666;
box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
}
</style>
<script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>
</head>
<body>
<div class = "info">最新版GL地图命名空间为BMapGL, 可按住鼠标右键控制地图旋转、修改倾斜角度。</div>
<div id="container"></div>
</body>
</html>
<script>
var map = new BMapGL.Map('container'); // 创建Map实例
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
</script>
看下效果
6 手动搭建
6.1 适应移动端页面展示
添加meta标签，使页面更好的在平台上展示。
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
6.2 设置容器样式
设置容器样式大小，使地图充满整个浏览器窗口：
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
6.3 引用百度地图插件
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=您的密钥"></script>
6.4 创建地图容器元素
地图需要一个HTML元素作为容器，这样才能展现到页面上。这里我们创建了一个div元素。
<div id="container"></div>
6.5 创建地图实例
位于BMapGL命名空间下的Map类表示地图，通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象。
var map = new BMapGL.Map("container");
注意：
1、在调用此构造函数时应确保容器元素已经添加到地图上；
2、命名空间 API GL版使用BMapGL作为命名空间，所有类均在该命名空间之下，比如：BMapGL.Map、BMapGL.Control、BMapGL.Overlay；
6.6 设置中心点坐标
这里我们使用BMapGL命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点，其中116.404表示经度，39.915表示纬度。（为天安门坐标）
var point = new BMapGL.Point(116.404, 39.915);
注意：
在使用百度地图JavaScript API服务时，需使用百度BD09坐标，如使用其他坐标（ WGS84、GCJ02）进行展示，需先将其他坐标转换为BD09，详细说明请参考坐标转换说明，请勿使用非官方的转换方法。
6.7 初始化设置级别
在创建地图实例后，我们需要对其进行初始化，BMapGL.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。 地图必须经过初始化才可以执行其他操作
map.centerAndZoom(point, 15);
百度地图API一共分为19级，比例尺分别为：
[1:20米（简称20米，后同），50米，100米，200米，500米，1公里，2公里，5公里，10公里，20公里，25公里，50公里，100公里，200公里，500公里，1000公里，2000公里，5000公里，10000公里]
分别对应：
[19级，18级，17级，16级，15级，14级，13级，12级，11级，10级，9级，8级，7级，6级，5级，4级，3级，2级，1级]
6.8 开放鼠标滑轮
开启鼠标滚轮缩放
map.enableScrollWheelZoom(true);
至此，我们就快速创建了一张以天安门为中心的地图。
附上源代码
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 设置meta字符集和缩放-->
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<!-- 标题-->
<title>手动搭建第一个百度地图</title>
<!-- // 设置容器样式-->
<style type="text/css">
html {
height: 100%
}
body {
height: 100%;
margin: 0px;
padding: 0px
}
#container {
height: 100%
}
</style>
<!-- 调用百度地图插件-->
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=GoOnKfPYhUnKlNpVGS7YMrgwzbOxOZYe">
</script>
</head>
<body>
<div id="container">
</div>
</body>
</html>
<script>
// 创建地图实例
const map = new BMapGL.Map("container");
// 创建点坐标
const point = new BMapGL.Point(116.404, 39.915);
// 初始化地图，设置中心点坐标和地图级别
// 地图级别越大越清晰
map.centerAndZoom(point, 12);
// 开启鼠标滚轮缩放
map.enableScrollWheelZoom(true);
//平移到
map.panTo(new BMap.Point(110.351,20.002));
//设置中心坐标
map.setCenter(110.351,20.002);
</script>
7 拓展
7.1 setCenter()
默认我们是以天安门为中心，其实我们可以进行修改中心坐标
7.2 panTo()
平移
7.3 zoomTo()
缩放
以上是调用百度地图的简单案例，详情请到官网查看，谢谢~