百度地图开发者使用教程

目录

1、申请百度账号和ak

2、准备页面

3、添加meta标签 方便在移动平台上展示

4、引用百度地图API文件

5、创建地图容器元素 设置容器样式 大小

6、创建地图实例

7、设置中心点坐标

8、地图初始化，同时设置地图展示级别

9、开启鼠标滚轮缩放

10、设置地图的旋转角度和倾斜角度

11、变更地图类型为地球

12、声明控件并添加到地图中

13、向地图中添加标注

14、监听标注事件

15、添加折线

16、添加多边形

17、向地图中添加文本标注

18、修改文本标注样式

19、向地图中添加信息窗口

20、定位

浏览器定位

IP定位

定位SDK辅助定位

---

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);     //开启鼠标滚轮缩放

10、设置地图的旋转