Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

175
Vistas
How can I get map instance in map event with leflet?

I want to know the latitude and longitude of the four corners of the displayed map when I drag the map. So, I make a code to get the longitude and latitude of the four courners, at a drag event occurs timing.

I test this code. The code catch the event and the event handler is fired. However, when I ran map.getBound (), the interpreter return an error.The error message is as follows

'Uncaught TypeError: Cannot read properties of undefined (reading 'getBounds')'

I'm confused. From the error message, it is possible that the map instance has not been created, but it is also possible that the event handler is working and has been created.

What's wrong and how can I get the size of the map in the event handler?

The code is here

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;
    });
}

thx.

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

When you call this in a function it uses the context of the function and not your class:

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
    });

You need to pass the context of the class. Change to:

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

or

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

or

this.Map.on( 'moveend', function(e){
        alert( this.Map.getBounds());
    }.bind(this));
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda