地位越高,自我评价就越高,自信心多强,能力就有多强。我们总能表现出与环境的和谐平等。——赫兹里特

效果如下

image-20210526190906760

跟着官网一步一步来即可

申请成为开发者

image-20210526185629388

然后在应用管理里创建应用

image-20210526185808454

填写信息

image-20210526190112770

点击复制AK

image-20210526190210868

然后复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html> 
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</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=您的密钥">
</script>
</head>

<body>
<div id="container"></div>
<script type="text/javascript">
var map = new BMapGL.Map("container");
// 创建地图实例
var point = new BMapGL.Point(116.404, 39.915);
// 创建点坐标
map.centerAndZoom(point, 15);
// 初始化地图,设置中心点坐标和地图级别
</script>
</body>
</html>

注意此处需要把[你的密钥]修改成刚刚复制的AK

如果你还需要鼠标滚轮缩放,可以像我这样写

1
2
3
4
5
6
7
8
9
10
<script src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=[你的密钥]"
type="text/javascript">
</script>
<div id="allmap"
style="width: 317px;height: 219px;overflow:hidden;margin:0;font-family:'微软雅黑';margin: 0 auto;"></div>
<script>
var mp = new BMapGL.Map('allmap');
mp.centerAndZoom(new BMapGL.Point(118.134071, 29.267853), 18);
mp.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
</script>

其他的还想要自定义的话,看文档就好了