每一位前端工程师都绕不开的——百度地图

01  完成头部文件和地图容器样式的编写，给地图容器一个宽高。

<div id="container"></div>
<!-- 存放地图的容器 -->
<style type="text/css">  
     #container{height: 600px;width: 800px;}   
     /*容器地图的宽高  */
</style> 

02 引入百度地图API文件

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=cVqXBY6pTjuDbTDLLOcqidmTSLQtao1I"></script>

当然，在你执行该步时，你首先要成为百度地图开发者，然后才能获取密钥。

03 初始化地图

创建一个地图实例，设置中心坐标点和缩放级别来初始化地图，然后可开启鼠标滚轮缩放功能。

var map = new BMapGL.Map("container");         // 创建地图实例 
var point = new BMapGL.Point(116.404, 39.915); // 创建点坐标 
map.centerAndZoom(point, 15);                  // 初始化地图，设置中心点坐标和地图级别
map.enableScrollWheelZoom(true);               //开启鼠标滚轮缩放 

<