使用百度地图开源库mapv，绘制marker过程中的遇到的坑

需求

项目过程中需要在地图上展示数百个marker，并且要求每个marker都需要绑定click、mouseover、mouseleave 事件，来切换marker的颜色。

mapv绘点选项中提供了两个事件方法， click和mousemove，事件参数有两个为item、event，item是dataSet中对应的数据；当事件触发时，将对应的item的icon换成对应的icon，实现效果。

坑

真实情况是 当鼠标hover 时，图标会闪来闪去。就算鼠标hover 了， item 也有可能返回null；

效果图

解决方法

对事件返回的event参数进行重写，代码如下

var MARKER_ICON_SIZE_WIDTH = 21; // marker的size.width
var MARKER_ICON_SIZE_height = 21；// marker的size.height

function getMapvEventMarkerIndex(map, event){
     
    var index = null;
    var eventPixel = map.pointToPixel(event.point);

    var XR = MARKER_ICON_SIZE_WIDTH/2; // 除2暂时没有弄明白，但是这样写就正常了...
    var YR = MARKER_ICON_SIZE_HEIGHT/2;

    for(var i=0,projsLen=mapvDataPoints.length; i< projsLen; i++） {
        var itemPixel = map.pointToPixel({lng: mapvDataPoints[i].lng, lat: mapvDataPoints[i].lat});
        var topX = itemPixel.x + XR;
        var bottomX = itemPixel.x - XR;
        var topY = itemPixel.y + YR;
        var bottomY = itemPixel.y - YR;

        if (eventPixel.x < topX && eventPixel.x > bottomX && eventPixel.y < topY && eventPixel.y > bottomY) {
            index = i;
        }
    }

    return index;
}