zoukankan      html  css  js  c++  java
  • 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;
    }
  • 相关阅读:
    1055. [HAOI2008]玩具取名【区间DP】
    BZOJ2435:[NOI2011]道路修建 (差分)
    1084. [SCOI2005]最大子矩阵【网格DP】
    1060. [ZJOI2007]时态同步【树形DP】
    1050. [HAOI2006]旅行【并查集+枚举】
    2463. [中山市选2009]谁能赢呢?【博弈论】
    luogu P1195 口袋的天空
    luogu P1162 填涂颜色
    luogu P1223 排队接水
    luogu P1331 海战
  • 原文地址:https://www.cnblogs.com/unique1319/p/7555017.html
Copyright © 2011-2022 走看看