如何使用leflet在地图事件中获取地图实例？

Question

我想知道拖动地图时显示的地图四个角的纬度和经度。 因此，我编写了一个代码来获取四个角的经度和纬度，以及拖动事件发生的时间。

我测试这段代码。 代码捕获事件并触发事件处理程序。但是，当我运行map.getBound（）时，解释器返回错误。错误消息如下

'Uncaught TypeError：无法读取未定义的属性（读取'getBounds'）'

我很困惑。从错误消息来看，有可能地图实例尚未创建，但也有可能事件处理程序正在工作并且已创建。

出了什么问题以及如何在事件处理程序中获取地图的大小？

代码在这里，

let Map;                // map instance
let X;                  // map position(longitude)
let Y;                  // map position(latitude)
let Z;                  // map zoom ratio
let ColorIndex;         // item color index
let ColorCode;          // item color code

/**
 * @brief   main program
 * @details main program
 *          initialize then show contents
 */
function WebViewMain()
{
    // initialize
    OSM_CoreInit();
    OSM_EventHandle();
}

function OSM_CoreInit()
{
    this.X = 0.0;            // map position(longitude)
    this.Y = 0.0;            // map position(latitude)
    this.Z = 1;              // map zoom ratio

    this.Map = new L.Map('map').setView([this.X, this.Y], this.Z);

    let tiles = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
            'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1
    });
    tiles.addTo(this.Map);
}

function OSM_EventHandle()
{
    this.Map.on( 'moveend', function(e){
        alert( this.Map.getBounds());
    });
    this.Map.on( 'click', function(e){
        let aa = e.latlng;
    });
}

谢谢。

Answer 1

当您在函数中调用 this 时，它使用函数的上下文而不是您的类：

this.Map.on( 'moveend', function(e){
        alert( this.Map.getBounds()); // this is now the event function and not the class, so there is no this.Map object
    });

您需要传递类的上下文。更改为：

this.Map.on( 'moveend', (e)=>{
        alert( this.Map.getBounds());
    });

或

this.Map.on( 'moveend', function(e){
        alert( this.Map.getBounds());
    }, this);

或

this.Map.on( 'moveend', function(e){
        alert( this.Map.getBounds());
    }.bind(this));