JS循环中给对象添加事件addEventListener的用法

痞子三分冷 提交于 2019-12-09 08:06:44

在做百度迁徙图的时候遇到:
循环中使用addEventListener方法,给各个marker对象增加点击事件,
顺便记录下百度地图的东西,整段代码都贴过来吧。。。。

// 百度地图API功能
var map = new BMap.Map("allmap", {enableMapClick: false});//构造地图时,关闭地图可点功能
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
var mapStyle = {
    features: ["road", "building", "water", "land"],//隐藏地图上的poi
    style: "dark"  //设置地图风格为高端黑
}
map.setMapStyle(mapStyle);
// 编写自定义函数,创建标注
var myIcon = new BMap.Icon("../img/node.png", new BMap.Size(20, 20));
var centerIcon = new BMap.Icon("../img/center.gif", new BMap.Size(0, 0));

// 节点点击事件
var getNodeDetail=function (obj) {
    return function(evt){
        console.log(evt,obj);
        var lng = obj.nodeLongitude;
        var lat = obj.nodeLatitude;
        alert(obj.id + "  ,  " + lng + "  , " + lat);
    }
}
$(function () {
    $.ajax({
        url: "/dcm/node/querynode",
        dataType: "json",
        type: "POST",
        success: function (resp) {
            if (resp) {
                var qyNode = {};//区域NODE
                var zxNodes = [];//中心NODE数组
                var shanshuoData = [];//闪烁效果json
                var dtqxData = [];//动态迁徙json
                var result = resp.result;
                for (var i = 0; i < result.length; i++) {
                    var node = result[i];
                    if (node.nodeType == '0') {// 区域
                        qyNode = node;
                    } else {//中心
                        zxNodes.push(node);
                    }
                    var jsonTmp = {};
                    jsonTmp.name = node.nodeName;
                    jsonTmp.lnglat = [node.nodeLongitude, node.nodeLatitude];
                    jsonTmp.type = 'circle';
                    if (node.nodeType == '0') {
                        jsonTmp.color = '#6EE7FF';
                        jsonTmp.max = 30;
                    } else {
                        if (node.nodeState == '1' || node.nodeState == '3') {//0:异常 1:正常 2:未连接 3.作业执行中
                            jsonTmp.color = '#7CFC00';
                        } else {
                            jsonTmp.color = '#EE0000';
                        }
                        jsonTmp.max = 15;
                    }
                    jsonTmp.speed = 0.5;
                    shanshuoData.push(jsonTmp);// 闪烁json数组
                }

                // 动态迁徙json数组
                for (var i = 0; i < zxNodes.length; i++) {
                    var jsonTmp = {};
                    jsonTmp.from = {
                        city: zxNodes[i].nodeName,
                        point: [zxNodes[i].nodeLongitude, zxNodes[i].nodeLatitude]
                    }
                    jsonTmp.to = {
                        city: qyNode.nodeName,
                        point: [qyNode.nodeLongitude, qyNode.nodeLatitude]
                    }
                    if (zxNodes[i].nodeState == '3') {
                        jsonTmp.move = 1;
                    } else {
                        jsonTmp.move = 0;
                    }
                    dtqxData.push(jsonTmp);// 动态迁徙json数组

                    var marker = new BMap.Marker(new BMap.Point(zxNodes[i].nodeLongitude, zxNodes[i].nodeLatitude), {icon: myIcon});
                    marker.addEventListener("click", getNodeDetail(zxNodes[i]));
                    map.addOverlay(marker);
                }



                // 初始化地图,设置中心点坐标和地图级别
                map.centerAndZoom(new BMap.Point(qyNode.nodeLongitude, qyNode.nodeLatitude), qyNode.mapFocalLevel);
                map.setCurrentCity(qyNode.city); // 设置地图显示的城市 此项是必须设置的

                var moveLine = new MoveLine(map, {
                    //marker点半径
                    markerRadius: 1,
                    //marker点颜色,为空或null则默认取线条颜色
                    markerColor: null,
                    //线条类型 solid、dashed、dotted
                    lineType: 'solid',
                    //线条宽度
                    lineWidth: 2,
                    //线条颜色
                    colors: ['#F9815C'],
                    //文本颜色
                    fontColor: '#B3EE3A',
                    //移动点半径
                    moveRadius: 2,
                    //移动点颜色
                    fillColor: '#fff',
                    //移动点阴影颜色
                    shadowColor: '#fff',
                    //移动点阴影大小
                    shadowBlur: 5,
                    data: dtqxData
                });
                var flashMarkerLayer = new FlashMarker(map, shanshuoData);

            }
        }
    })
});

addEventListener部分代码单摘出来:1

// 节点点击事件
var getNodeDetail=function (obj) {
    return function(evt){
        console.log(evt,obj);
        var lng = obj.nodeLongitude;
        var lat = obj.nodeLatitude;
        alert(obj.id + "  ,  " + lng + "  , " + lat);
    }
}

2 调用方式:

var marker = new BMap.Marker(new BMap.Point(zxNodes[i].nodeLongitude, zxNodes[i].nodeLatitude), {icon: myIcon});
marker.addEventListener("click", getNodeDetail(zxNodes[i]));
map.addOverlay(marker);

参考:https://blog.csdn.net/wxincome/article/details/69388741

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!