Javascript代码在我将其转换为类时不起作用

我的代码的目标是显示包含一些标记的地图

此代码工作正常：

loadMarkers() { // charger la liste des markers en s'appuyant sur la liste des stations
    let req = new XMLHttpRequest();
    req.open('GET', 'https://api.jcdecaux.com/vls/v1/stations?contract=Lyon&apiKey=b79a52a433adef0fc100cd73fedf36710122f4ab');
    req.addEventListener('load', function() {
        if (req.status >= 200 && req.status < 400) {
            mapbikes.contentstation(req.responseText);
        } else {
            mapbikes.contentstation(req.status);
        }

    });

    req.addEventListener('error', function() { // affichage d'un message d'erreur si jcdecaux ne répond pas.
        console.log("erreur de connexion");
    });

    req.send();
},

contentstation(response) { // affichage pour chaque marker, des inforamtions d'une station de vélos
    response = JSON.parse(response);
    response.forEach(function (info) {
        L.marker([info.position.lat, info.position.lng], {
            "jcdecauxInfo": info
        })
        .on('click', mapbikes.onMarkerClick) // Clic sur un marker
        .addTo(mapbikes.mapbikes)
        .bindPopup(
            `<div class="text-success"><h5>Station de Vélo'v</h5></div><h6>` +  info.name + `</h6>` +
            info.address + `<br>` + `<i class="fas fa-bicycle"></i>&nbsp;&nbsp;<strong>` + info.available_bikes + `&nbsp;vélo(s) disponible(s)</strong>`
        );
    });
},

loadMarkers（）{//charger la liste des markers en s'appuyant sur la liste des stations
让req=newXMLHttpRequest（）；
请求打开（'GET'，'https://api.jcdecaux.com/vls/v1/stations?contract=Lyon&apiKey=b79a52a433adef0fc100cd73fedf36710122f4ab');
请求addEventListener（'load'，function（）{
如果（请求状态>=200&请求状态<400）{
mapbikes.contentstation（请求响应文本）；
}否则{
mapbikes.contentstation（请求状态）；
}
});
req.addEventListener（'error'，function（）{//affichage d'un message d'erreur si jcdecaux ne répond pas。
控制台日志（“连接错误”）；
});
请求发送（）；
},
contentstation（response）{//affichage pour chaque marker，des'une station de vélos
response=JSON.parse（response）；
响应。forEach（功能（信息）{
L.标记（[info.position.lat，info.position.lng]{
“jcdecauxInfo”：信息
})
.on（'click'，mappbikes.onMarkerClick）//Clic sur un marker
.addTo（mapbikes.mapbikes）
.bindPopup(
`维罗夫车站`+info.name+`+
info.address+`
`+``+info.available\u bikes+`vélo可分配文件`
);
});
},

但是当我在创建类时转换代码时，它就不起作用了：

class Mapbikes { // propriétés de la carte
    constructor() {
        this.lat = 45.757192;
        this.lng = 4.840495;
        this.zoom =  15;
        this.mapContainer = 'mapid';
        this.mymap = '';
        this.displayMap = '';
        this.addTo = '';
        this.idMap = 'mapbox.streets';
        this.accessToken = 'pk.eyJ1IjoiNzZzZWJhc3RpZW4iLCJhIjoiY2p3czd4dWNmMGtzbjQ5cDVscmhienQ2YyJ9.4jK_HgpV9ObUTqYmBeVtdg';
        this.layer = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}';
        this.attribution = 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
            '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
            'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>';
    }

    init() { // affichage de la carte de Lyon, vide
        this.mapbikes = L.map(this.mapContainer, {
            center: [this.lat, this.lng],
            zoom: this.zoom,
        })
    }

    display() {  // affichage du Layer mapbox.com
        L.tileLayer(this.layer, {
            id: this.idMap,
            maxZoom: 18,
            attribution: this.attribution,
            accessToken: this.accessToken,
        }).addTo(this.mapbikes);

        this.loadMarkers();
    }

    loadMarkers() { // charger la liste des markers en s'appuyant sur la liste des stations
        let req = new XMLHttpRequest();
        req.open('GET', 'https://api.jcdecaux.com/vls/v1/stations?contract=Lyon&apiKey=b79a52a433adef0fc100cd73fedf36710122f4ab');
        req.addEventListener('load', function() {
            if (req.status >= 200 && req.status < 400) {
                Mapbikes.contentstation(req.responseText);
            } else {
                Mapbikes.contentstation(req.status);
            }
        });

        req.addEventListener('error', () => { // affichage d'un message d'erreur si jcdecaux ne répond pas.
            console.log("erreur de connexion");
        });

        req.send();
    }

    contentstation(response) { // affichage pour chaque marker, des inforamtions d'une station de vélos
        response = JSON.parse(response);
        response.forEach(info => {
            L.marker([info.position.lat, info.position.lng], {
                "jcdecauxInfo": info
            })
            .on('click', Mapbikes.onMarkerClick) // Clic sur un marker
            .addTo(Mapbikes.mapbikes)
            .bindPopup(
                `<div class="text-success"><h5>Station de Vélo'v</h5></div><h6>` +  info.name + `</h6>` +
                info.address + `<br>` + `<i class="fas fa-bicycle"></i>&nbsp;&nbsp;<strong>` + info.available_bikes + `&nbsp;vélo(s) disponible(s)</strong>`
            );
        });
    }

类映射{//propriétés de la carte
构造函数（）{
该值为0.lat=45.757192；
这是1.lng=4.840495；
这个.zoom=15；
this.mapContainer='mapid'；
this.mymap=''；
this.displayMap=''；
this.addTo=''；
this.idMap='mapbox.streets'；
this.accessToken='pk.eyj1ijoinzzwjhc3rpzw4ilcjhijoy2p3czd4dwnmgzbjq5cdvscmhienqyyj9.4jK_HgpV9ObUTqYmBeVtdg'；
这是我的https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png？access_token={accessToken}'；
this.attribute='Map data©；contributors，'+
', ' +
“意象”；
}
init（）{//affichage de la carte de Lyon，参见
this.mapbikes=L.map（this.mapContainer{
中心：[this.lat，this.lng]，
zoom:this.zoom，
})
}
display（）{//affichage du Layer mapbox.com
L.tileLayer（该层{
id:this.idMap，
maxZoom:18，
归属：这个，归属，
accessToken:this.accessToken，
}).addTo（this.mappikes）；
这是loadMarkers（）；
}
loadMarkers（）{//s'appuyant站上的标记列表
让req=newXMLHttpRequest（）；
请求打开（'GET'，'https://api.jcdecaux.com/vls/v1/stations?contract=Lyon&apiKey=b79a52a433adef0fc100cd73fedf36710122f4ab');
请求addEventListener（'load'，function（）{
如果（请求状态>=200&请求状态<400）{
Mapbikes.contentstation（请求响应文本）；
}否则{
Mapbikes.contentstation（请求状态）；
}
});
请求addEventListener（'error'，（）=>{//affichage d'un message d'erreur si jcdecaux ne répond pas。
控制台日志（“连接错误”）；
});
请求发送（）；
}
contentstation（response）{//affichage pour chaque marker，des'une station de vélos
response=JSON.parse（response）；
response.forEach（信息=>{
L.标记（[info.position.lat，info.position.lng]{
“jcdecauxInfo”：信息
})
.on（'click'，mappbikes.onMarkerClick）//Clic sur un marker
.addTo（Mapbikes.Mapbikes）
.bindPopup(
`维罗夫车站`+info.name+`+
info.address+`
`+``+info.available\u bikes+`vélo可分配文件`
);
});
}

我在控制台中遇到此错误：

TypeError:Mapbikes.contentstation不是函数

我已经尝试在Mapbikes.contentstation（req.responseText）上使用bind； 但它不起作用

我怎样才能纠正这个问题

---

谢谢

欢迎来到Stack overflow，您可以尝试以下方法吗：

  loadMarkers() { // charger la liste des markers en s'appuyant sur la liste des stations
    const me = this;
    let req = new XMLHttpRequest();
    req.open('GET', 'https://api.jcdecaux.com/vls/v1/stations?contract=Lyon&apiKey=b79a52a433adef0fc100cd73fedf36710122f4ab');
    req.addEventListener('load', function () {
      if (req.status >= 200 && req.status < 400) {
        me.contentstation(req.responseText);
      } else {
        me.contentstation(req.status);
      }
    }

loadMarkers（）{//charger la liste des markers en s'appuyant sur la liste des stations
const me=这个；
让req=newXMLHttpRequest（）；
请求打开（'GET'，'https://api.jcdecaux.com/vls/v1/stations?contract=Lyon&apiKey=b79a52a433adef0fc100cd73fedf36710122f4ab');
请求addEventListener（'load'，函数（）{
如果（请求状态>=200&请求状态<400）{
me.contentstation（请求响应文本）；
}否则{
me.contentstation（请求状态）；
}
}

---

您也可以尝试提供as回调，因为它会自动绑定到当前实例，但箭头函数是

loadMarkers

方法中的ES6和。

，而不是调用：

Mapbikes.contentstation(req.responseText);

你应该这样称呼它：

this.contentstation(req.responseText);

---

您的第一个代码段看起来不完整，它以一个方法定义开头。请您显示整个代码好吗？