Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

182
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda