HTML新特性【规划公交路线、规划步行路线、定位、自定义视角动画、账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置】(五)-全面详解（学习总结---从入门到深化）（上）：https://developer.aliyun.com/article/1420275
接口使用方法：
1、注册百度账号
2、 申请成为百度开发者
3、 获取服务密钥
4 、使用服务相关功能
百度地图_初始化
1、引用百度地图API文件
<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=你的密钥"></script>
2、创建地图容器元素
<div id="container"></div>
3、创建地图实例，其参数可以是元素id也可以是元素对象
var map = new BMapGL.Map("container");
4、设置中心点坐标
var point = new BMapGL.Point(116.404,39.915); //第一个参数为经度，第二个参数为纬度
5、地图初始化，同时设置地图展示级别，地图展示级别范围（1- 21）
map.centerAndZoom(point, 15); //第一个参数为中心点坐标，第二个参数为地图级别
6 、开启鼠标滚轮缩放
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
百度地图_变更地图类型
var map = new BMapGL.Map('container')//生成地图实例 var centerPoint=new BMapGL.Point(116.404, 39.915)//设置地图的中心点 map.centerAndZoom(centerPoint,1)//初始化地图 map.enableScrollWheelZoom(true)//开启鼠标滚轮缩放 map.setMapType(BMAP_EARTH_MAP)//设置地图类型为地球
百度地图_添加控件
控件是负责与地图交互的UI元素，百度地图API支持比例尺、缩放、定位、城市选择列表、版权 。
1、完成地图初始化
2、添加控件， map.addControl(控件实例)
添加比例尺控件
var scaleCtrl = new BMapGL.ScaleControl(); // 实例化比例尺控件 map.addControl(scaleCtrl);//添加比例尺控件
添加缩放控件
var zoomCtrl = new BMapGL.ZoomControl(); //实例化控件 map.addControl(zoomCtrl);// 添加缩放控件
添加城市列表控件
var cityCtrl = new BMapGL.CityListControl(); //实例化控件 map.addControl(cityCtrl);// 添加城市列表控件
添加定位控件
var locationCtrl=new BMapGL.LocationControl()//实例化控件 map.addControl(locationCtrl)//添加定位控件
百度地图_改变控件位置
控制控件位置
初始化控件时，可提供一个可选参数，是一个json对象，里面有 个属性 anchor 表示控件的停靠位置，即控件停靠在地图的哪个角。当地图尺寸发生变化时，控件会根据停靠位置的不同来调整自己的位置 。
var scaleCtrl= new BMapGL.ScaleControl({anchor:BMAP_ANCHOR_TOP_LEFT}) //实例化控件的时候可以传递一个可选参数，为一个json map.addControl(scaleCtrl)
控件位置偏移
除了指定停靠位置外，还可以通过偏移量来指示控件距离地图边界有多少像素。 通过 offset 设置。
var scaleCtrl= new BMapGL.ScaleControl({ anchor:BMAP_ANCHOR_TOP_RIGHT, //offset为一个Size的实例，接受的俩个参数分别代表水平方向距离跟垂直方向距离 offset:new BMapGL.Size(10,10) }) map.addControl(scaleCtrl)//添加比例尺控件
百度地图_添加覆盖物
所有叠加或覆盖到地图的内容，我们统称为地图覆盖物。
添加覆盖物： map.addOverlay(覆盖物实例)
添加点（标注点）
使用的类： Marker
var point = new BMapGL.Point(116.404,39.915); var marker = new BMapGL.Marker(point); // 创建标注点 map.addOverlay(marker);// 将标注添加到地图中
添加多边形
使用的类： Polygon
var polygon = new BMapGL.Polygon([ new BMapGL.Point(116.387112,39.920977), new BMapGL.Point(116.385243,39.913063), new BMapGL.Point(116.394226,39.917988), new BMapGL.Point(116.401772,39.921364), new BMapGL.Point(116.41248,39.927893) ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); map.addOverlay(polygon);
删除覆盖物： map.removeOverlay(具体覆盖物实例) 或者 map.clearOverlays()
var overlays = map.getOverlays()//获取地图的所有覆盖物 map.removeOverlay(overlays[0])//删除对应的覆盖物 //map.clearOverlays()//删除地图上所有的覆盖物
监听覆盖物事件
overlay.addEventListener('事件名称'，callback)
marker.addEventListener("click", function(e){ console.log(e) });
百度地图_自定义标注图标
1、定义标注图标
Icon(url: String, size: Size , opts: IconOptions)
url ：指定图标要使用的图片路径
size ：指定放置图标的区域大小
opts ：指定关于图标的位置的一些参数
var myIcon = new BMapGL.Icon("markers.png", new BMapGL.Size(50, 50), //指定放置图标区域的大小 { //指定地理点跟图标左上角的相对偏移量 anchor: new BMapGL.Size(10, 25), });
2、使用自定义的标注图标创建标注点
// 创建标注对象并添加到地图 var marker = new BMapGL.Marker(point, { icon: myIcon }); map.addOverlay(marker);
