leaflet事件传参

leaflet中的on和off与js中的事件方法还是有些区别,他似乎并不能像js中绑定事件的方法一样,直接将数据以对象的形式作为事件方法的参数传入到事件中,那我们如果要在leaflet绑定的事件中动态的传入数据怎么办呢?

 

其实办法还是有的,以marker为例,假如一个click事件绑定到marker上,我们其实可以把数据以对象的形式传到绑定该事件的maerker的options对象中,例如:

function loadShipLayer(){
    if(shipLayer == null){
        shipLayer = new L.layerGroup();

        var shipData = eval(ship_cache);

        var icon = L.icon({
            iconUrl: 'img/svg/ship2.svg', // ------这里设置图标
            iconSize: [46, 46]
        });

        for(var i = 0; i < shipData.ship.length; i++){
            var shipInfo = shipData.ship[i];
            for(var key in shipInfo){
                var ship = shipInfo[key];
                var shipOri = ship.ship_section.split('-')[0];
                var shipDes = ship.ship_section.split('-')[1];
                var point =[ship.ship_latitude,ship.ship_longitude];

                /*  leaflet中title的换行是\n */
                L.marker(point,{Ship:ship,icon: icon,title:ship.ship_id+"\n"+shipOri+" — "+shipDes}).addTo(shipLayer).on('click',function () {

                    var index = layer.open({
                        type: 2,
                        skin: 'layui-layer-hei', //样式类名
                        title: '通航查询',
                        shadeClose: true,
                        shade: false,
                        maxmin: true, //开启最大化最小化按钮
                        area: ['90%', '90%'],
                        content: 'navQuery.html?shipOri='+this.options.Ship.ship_section.split('-')[0]+
                        '&shipDes='+this.options.Ship.ship_section.split('-')[1]+
                        "&shipStaTime="+this.options.Ship.ship_updateTime+
                        "&shipEndTime="+this.options.Ship.ship_arriveTime+
                        "&shipId="+this.options.Ship.ship_id
                    });
                    layer.full(index);
                });
            }
        }
    }
    return shipLayer;
}

 

posted @ 2017-09-19 23:54  unique1319  阅读(765)  评论(0编辑  收藏  举报