HTML新特性【账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置、添加覆盖物、自定义标注图标、添加文本标注】(四)-全面详解（学习总结---从入门到深化）（上）：https://developer.aliyun.com/article/1420270
百度地图_改变控件位置
控制控件位置
初始化控件时，可提供一个可选参数，是一个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);
百度地图_添加文本标注
添加文本标注
使用的类： Label
var point = new BMapGL.Point(116.404,39.915); var content = "label"; var label = new BMapGL.Label(content, { //创建文本标注 position: point, // 设置标注的地理位置 offset: new BMapGL.Size(10, 20) // 设置标注的偏移量 }) map.addOverlay(label);
修改文本标注的样式
label.setStyle({ // 设置label的样式 color: '#000', fontSize: '30px', border: '2px solid #1E90FF' })
百度地图_正/逆地址解析
1 、获取地址解析器
new BMapGL.Geocoder()
2 使用地址解析器
地址解析：根据地址描述获得该位置的地理经纬度坐标
Geocoder.getPoint(具体地址,callback)
// 创建地址解析器实例 var geocoder = new BMapGL.Geocoder() //通过具体地址获得该地址对应的地理位置的经纬度坐标，并进行使用 geocoder.getPoint('北京市清华大学',function(p){ console.log(p) map.centerAndZoom(p,15) var marker=new BMapGL.Marker(p) map.addOverlay(marker) },'北京市')
在调用 Geocoder.getPoint() 方法时您需要提供地址解析所在的城市。
逆地址解析：根据经纬度坐标点获得该地点的地址描述
Geocoder.getLocation(Point,callback)
map.addEventListener('click',function(e){ console.log(e) //根据地理经纬度坐标获取具体地址信息 geocoder.getLocation(e.latlng,function( result){ console.log(result) }) })
百度地图_信息窗口
使用的类： InfoWindow
map.addEventListener('click', function (e) { geocoder.getLocation(e.latlng, function (result) { var str='当前地址为：'+result.address //实例化信息窗口 var infowindow = new BMapGL.InfoWindow(str, { width: 100,//信息窗口宽度 height: 50,//信息窗口高度 title: '提示'//信息窗口标题 }) // 在地图上打开信息窗口 map.openInfoWindow(infowindow, e.latlng) }) })
同一时刻只能有一个信息窗口在地图上打开
百度地图_规划驾车路线
1 创建驾车导航实例
DrivingRoute(location,options)
2 使用实例发起检索
DrivingRoute.search(start,end)
// 创建驾车导航的实例 var driving = new BMapGL.DrivingRoute(map, { //设置结果呈现 renderOptions: { map: map, autoViewport: true }, //检索完成后的回调函数 onSearchComplete: function (result) { console.log(result) } }) //获取地址解析器 var geocoder = new BMapGL.Geocoder() var startPoint, endPoint; document.querySelector('#start').onblur = function (e) { // 获取起点的坐标 geocoder.getPoint(e.target.value, function (p) { startPoint = p }) } document.querySelector('#end').onblur = function (e) { //获取终点的坐标 geocoder.getPoint(e.target.value, function (p) { endPoint = p }) } document.querySelector('#search').onclick = function () { //发起检索 driving.search(startPoint, endPoint) }
