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

高端百度地图开发系列

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

自定义水滴头像之鼠标事件、API封装对接

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

var headerImg1 =newLockAvatarLay(newBMap.Point(116.407845,39.914101),'images/header_bg1.png',{});
        map.addOverlay(headerImg1);var headerImg2 =newLockAvatarLay(newBMap.Point(116.457592,39.907851),'images/header_bg2.png',{});
        map.addOverlay(headerImg2);var headerImg2 =newLockAvatarLay(newBMap.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.遍历数据

//遍历数据;functiongetMarker(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 =newwindow.BMap.Point(p0, p1)addMarker(point, avatar, id);}}

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

//添加自定义覆盖物;functionaddMarker(point, avatar){var headerImg =newLockAvatarLay(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方法可获得该对象实例。
属性类型描述floatPaneHTMLElement信息窗口所在的容器markerMouseTargetHTMLElement标注点击区域所在的容器floatShadowHTMLElement信息窗口阴影所在的容器labelPaneHTMLElement文本标注所在的容器markerPaneHTMLElement标注图标所在的容器markerShadowHTMLElement标注阴影所在的容器mapPaneHTMLElement折线、多边形等矢量图形所在的容器

四、鼠标操作单击事件

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

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

@漏刻有时