• 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的换行是
     */
                    L.marker(point,{Ship:ship,icon: icon,title:ship.ship_id+"
    "+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;
    }
  • 相关阅读:
    day20
    day19
    day18
    day17
    day16
    day14 HTML
    day7课程
    day6
    python-day4
    python-day3
  • 原文地址:https://www.cnblogs.com/unique1319/p/7555017.html
Copyright © 2020-2023  润新知