目录
1、申请百度账号和ak
2、准备页面
3、添加meta标签 方便在移动平台上展示
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
4、引用百度地图API文件
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=您的密钥">
5、创建地图容器元素 设置容器样式 大小
<div id="container"></div>
<style type="text/css"> html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:100%} </style>
6、创建地图实例
var map = new BMapGL.Map("container");
7、设置中心点坐标
这里我们使用BMapGL命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点,其中116.404表示经度,39.915表示纬度。(为天安门坐标)
var point = new BMapGL.Point(116.404, 39.915); 注意:在使用百度地图JavaScript API服务时,需使用百度BD09坐标,如使用其他坐标( WGS84、GCJ02)进行展示,需先将其他坐标转换为BD09,详细说明请参考坐标转换说明,请勿使用非官方的转换方法。
8、地图初始化,同时设置地图展示级别
在创建地图实例后,我们需要对其进行初始化,BMapGL.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。 地图必须经过初始化才可以执行其他操作
map.centerAndZoom(point, 15);
9、开启鼠标滚轮缩放
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放