JS迴圈中給物件新增事件addEventListener的用法
阿新 • • 發佈:2019-01-29
在做百度遷徙圖的時候遇到:
迴圈中使用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);