在做百度迁徙图的时候遇到:
循环中使用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);
来源:CSDN
作者:无名小仙男
链接:https://blog.csdn.net/zxl8876/article/details/82459356