百度地图api-基本用法总结

web前端JavaScript嵌入百度地图API最详细的方法

参考百度地图官方api：百度地图官方api
百度地图提供的拾取坐标： 百度地图提供的拾取坐标

加载地图前提：

1. 申请百度地图账号
2. 申请开发者填写开发者信息
3. 申请AK 点击查看申请步骤

（具体可看个人主页免费视频课程） 

一：百度地图概念

百度地图API是百度地图开放平台面向广大政府、企业、互联网等开发者开放的免费地图服务。拥有定位、地图、导航、轨迹、路况、路线规划、搜索，七大基础地图服务能力，并将七大服务能力开放给各行业开发者使用。

二：百度地图特点

1.免费
百度地图API是免费的对于使用者能够减少使用成本。
2.简单
百度地图API中有详细的教程，一步一步的指导使用者学习和使用，对于刚开始使用API或刚开始学习编程的人来说比较方便。
3.功能齐全
百度地图API提供的功能较多，有定位、地图、导航、轨迹、路况、路线规划、搜索，七大基础地图服务，并且都是常用的实用性较强。
4.支持性较好
百度地图API可以在移动端和PC端使用，还支持在微信小程序中使用，还有javascript相应的API，有利于前端开发的对接。

三： 加载地图

加载地图步骤

1.新建一个html页面

2.引入js

3..写下样式

 4.创建地图容器元素

5.开始写js 初始化地图

map.centerAndZoom(point, 15);的最终效果
值越大 地图越大

map.centerAndZoom(point, 10);的最终效果
值越小 地图越小

四、 添加控件

var map = new BMapGL.Map("container");//创建地图实例
var point = new BMapGL.Point(120.872845, 32.021089);//设置中心经纬度
map.centerAndZoom(point, 15);//初始化地图
map.enableScrollWheelZoom(true); //开启鼠标滚轮 地图可以进行放大 缩小
map.addControl(new BMapGL.ScaleControl()); // 添加比例尺控件 左下角显示
map.addControl(new BMapGL.ZoomControl());// 添加缩放控件 右下角显示
map.addControl(new BMapGL.CityListControl());  // 添加城市列表控件 左上角
map.addControl(new BMapGL.MapTypeControl());// 地图类型 右上角显示

1 开启鼠标滚轮

map.enableScrollWheelZoom(true); //开启鼠标滚轮 地图可以进行放大 缩小

2 添加比例尺控件

map.addControl(new BMapGL.ScaleControl()); // 添加比例尺控件 左下角显示

 

3 添加缩放控件

map.addControl(new BMapGL.ZoomControl());// 添加缩放控件 右下角显示

 4 添加城市列表控件

map.addControl(new BMapGL.CityListControl()); // 添加城市列表控件 左上角

 

 五： 文本标注

1添加默认的文本标注

//向地图添加了一个文本标注，并使用默认的标注样式：
var content = "hello world";
var label = new BMapGL.Label(content, {       // 创建文本标注
    position: point,                          // 设置标注的地理位置
    offset: new BMapGL.Size(10, 20)           // 设置标注的偏移量
})
map.addOverlay(label);                        // 将标注添加到地图中

2添加自定义样式的文本标注

//地图添加大号 文本标注
var content = 'hello world';
var label = new BMapGL.Label(content, {       // 创建文本标注
    position: point,
    offset: new BMapGL.Size(10, 20)
})
map.addOverlay(label);                        // 将标注添加到地图中
label.setStyle({                              // 设置label的样式
    color: '#f70',
    fontSize: '50px',
    border: '2px solid blue'
})

 六： 地图添加标注点

1 添加默认标注

添加成功后 会有一个默认的红色的定位图标显示在地图中

//Marker是一个用来往地图上添加点标记的类。使用它将任何你希望用户看到的兴趣点标注在地图上。
//API提供了默认图标样式，您也可以通过Icon类来指定自定义图标。Marker的构造函数的参数为Point和MarkerOptions（可选）。
//注意：当您使用自定义图标时，标注的地理坐标点将位于标注所用图标的中心位置，您可通过Icon的offset属性修改标定位置。
var point = new BMapGL.Point(120.872845, 32.021089);
var marker = new BMapGL.Marker(point);        // 创建标注
map.addOverlay(marker);                     // 将标注添加到地图中

 2 添加自定义图片 标注

//定义标注图标 通过Icon类可实现自定义标注的图标，下面示例通过参数MarkerOptions的icon属性进行设置，您也可以
//marker.setIcon()方法。
var myIcon = new BMapGL.Icon("../images/love.png", new BMapGL.Size(23, 25), {
    // 指定定位位置。
    // 当标注显示在地图上时，其所指向的地理位置距离图标左上
    // 角各偏移10像素和25像素。您可以看到在本例中该位置即是
    // 图标中央下端的尖角位置。
    anchor: new BMapGL.Size(10, 25),
    // 设置图片偏移。
    // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您
    // 需要指定大图的偏移位置，此做法与css sprites技术类似。
    //imageOffset: new BMapGL.Size(0, 0 - 25)   // 设置图片偏移
});
//创建标注对象并添加到地图
var marker = new BMapGL.Marker(point, { icon: myIcon });
map.addOverlay(marker);

 3 添加地图标注监听

点击标注 触发点击事件

marker.addEventListener("click", function () {
    alert("您点击了自定义标注");
});