1. 程式人生 > >JS迴圈中給物件新增事件addEventListener的用法

JS迴圈中給物件新增事件addEventListener的用法

在做百度遷徙圖的時候遇到:
迴圈中使用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);