Map.getCenter et map.getBounds ne sont pas des fonctions à l'intérieur de la fonction map.target.on('click')

Question

Je suis en train de créer une application qui utilise l'API Leaflet OpenStreetMap mais je rencontre un problème. J'essaie d'obtenir les coordonnées du centre lorsque je clique sur ma carte, mais j'obtiens l'erreur : 'TypeError: map.getCenter n'est pas une fonction', il en va de même pour 'TypeError: map.getCenter n'est pas une fonction'. Voici mon code ci-dessous.

import React, {Component} from 'react';
import L from 'leaflet';
import './App.css';
import leafGreen from './assets/leaf-green.png';
import leafRed from './assets/leaf-red.png';
import leafShadow from './assets/leaf-shadow.png';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';

class App extends Component {
  constructor() {
    super();
    this.state = {
      markers: [[51.505, -0.09]]
    };
  }

  greenIcon = L.icon({
    iconUrl: leafGreen,
    shadowUrl: leafShadow,
    iconSize:     [38, 95], // taille de l'icône
    shadowSize:   [50, 64], // taille de l'ombre
    iconAnchor:   [22, 94], // point de l'icône correspondant à l'emplacement du marqueur
    shadowAnchor: [4, 62],  // pareil pour l'ombre
    popupAnchor:  [-3, -76]
  });

  render() {
    return (
       {
          console.log(map.getCenter())
          // var bounds = map.getBounds()
          // console.log(bounds.getCenter())
          map.target.on("click", function (e) {
            const { lat, lng } = e.latlng;
            var marker = L.marker([lat, lng], {icon: L.icon({
              iconUrl: leafRed,
              shadowUrl: leafShadow,
              iconSize:     [38, 95], // taille de l'icône
              shadowSize:   [50, 64], // taille de l'ombre
              iconAnchor:   [22, 94], // point de l'icône correspondant à l'emplacement du marqueur
              shadowAnchor: [4, 62],  // pareil pour l'ombre
              popupAnchor:  [-3, -76]
            })} ).addTo(map.target);
            marker.bindPopup("Nouveau")
          });
        }}
        >

        {this.state.markers.map((position, idx) => 

            Un joli popup CSS3.  Facilement personnalisable.

        )}

    );
  }
}

export default App;

Est-ce que quelqu'un remarque quelque chose que je fais incorrectement, j'espère avoir de vos nouvelles.

Answer 1

Vous feriez mieux d'utiliser la propriété whenCreated qui renvoie directement l'instance de la carte et qui est officiellement documentée. whenReady renvoie l'instance de la carte si vous faites map.target mais ce n'est pas officiellement documenté bien que cela fonctionne. Par conséquent, si vous accédez directement aux méthodes de la carte sans utiliser map.target, vous obtiendrez une erreur car l'instance de la carte est indéfinie à ce moment-là. Vous l'utilisez déjà quelques lignes plus loin (map.target). Consultez ici pour plus d'informations concernant la documentation.

  {
          console.log(map.getCenter())
        }
...
/>

Answer 2

Lorsque vous utilisez la propriété whenReady, vous devez utiliser map.target comme préfixe pour getCenter(), ce qui est différent de la syntaxe des autres propriétés comme whenCreated. Je vois que vous avez déjà un peu compris, mais je voudrais le confirmer dans l'extrait de code ci-dessous:

whenReady={(map) => {
          map.target.on("drag", function (e) {
            console.log(map.target.getCenter())
}