高端百度地图开发2：自定义水滴头像（鼠标事件、API封装对接）

高端百度地图开发系列

• 高端百度地图开发1：自定义水滴头像（自定义标注覆盖物、Overlay覆盖类）

一、添加自定义覆盖物的方法

var headerImg1 = new LockAvatarLay(new BMap.Point(116.407845, 39.914101), 'images/header_bg1.png', {});map.addOverlay(headerImg1);var headerImg2 = new LockAvatarLay(new BMap.Point(116.457592, 39.907851), 'images/header_bg2.png', {});map.addOverlay(headerImg2);var headerImg2 = new LockAvatarLay(new BMap.Point(116.416486, 39.887259), 'images/header_bg3.png', {});map.addOverlay(headerImg2);

二、对接API数据

1.获取API数据(模拟)

 var dataArr =[{"poi_lng": 116.407845, "poi_lat": 39.914101, "avatar": "images/header_bg1.png", "id": 1},{"poi_lng": 116.457592, "poi_lat": 39.907851, "avatar": "images/header_bg2.png", "id": 2},{"poi_lng": 116.416486, "poi_lat": 39.887259, "avatar": "images/header_bg3.png", "id": 3},{"poi_lng": 116.328955, "poi_lat": 39.900545, "avatar": "images/header_bg4.png", "id": 4}];

2.遍历数据

  //遍历数据;function getMarker(markerArr) {for (var i = 0; i < markerArr.length; i++) {var p0 = markerArr[i].poi_lng;var p1 = markerArr[i].poi_lat;var id = markerArr[i].id;var avatar = markerArr[i].avatar;var point = new window.BMap.Point(p0, p1)addMarker(point, avatar, id);}}

3.添加自定义覆盖物封装函数

    //添加自定义覆盖物;function addMarker(point, avatar) {var headerImg = new LockAvatarLay(point, avatar, {});map.addOverlay(headerImg);}

4.添加监听事件

 //添加监听事件LockAvatarLay.prototype.addEventListener = function (event, fun) {this._div['on' + event] = fun;}

三、覆盖物类

1.Overlay

覆盖物的抽象基类，所有覆盖物均继承基类的方法。此类不可实例化。

方法	返回值	描述
initialize(map: Map)	HTMLElement	抽象方法，用于初始化覆盖物，当调用map.addOverlay时，API将调用此方法。自定义覆盖物时需要实现此方法。自定义覆盖物时需要将覆盖物对应的HTML元素返回
isVisible()	Boolean	判断覆盖物是否可见
draw()	none	抽象方法，当地图状态发生变化时，由系统调用对覆盖物进行绘制。自定义覆盖物需要实现此方法
show()	none	显示覆盖物。对于自定义覆盖物，此方法会自动将initialize方法返回的HTML元素样式的display属性设置为空
hide()	none	隐藏覆盖物。对于自定义覆盖物，此方法会自动将initialize方法返回的HTML元素样式的display属性设置为none

2.MapPanes

此类表示地图上所有覆盖物的容器集合，没有构造函数，通过对象字面量形式表示。通过Map的getPanes方法可获得该对象实例。

属性	类型	描述
floatPane	HTMLElement	信息窗口所在的容器
markerMouseTarget	HTMLElement	标注点击区域所在的容器
floatShadow	HTMLElement	信息窗口阴影所在的容器
labelPane	HTMLElement	文本标注所在的容器
markerPane	HTMLElement	标注图标所在的容器
markerShadow	HTMLElement	标注阴影所在的容器
mapPane	HTMLElement	折线、多边形等矢量图形所在的容器

四、鼠标操作单击事件

将数据通过封装函数进行传递，获取对应头像的ID，然后进行弹窗或信息展示;

    //自定义覆盖物和事件调用;function addMarker(point, avatar, id) {var headerImg = new LockAvatarLay(point, avatar, {});map.addOverlay(headerImg);//为自定义覆盖物添加点击事件headerImg.addEventListener('click', function () {console.log(id);});}

---

@漏刻有时