javascript - Javascript コールバックと Geolocation API

Question

私はJavascriptに非常に慣れていないので、自分で解決/理解できない問題に遭遇しました。

「userPosition」プロパティを持つ「UserMap」クラスを作成し、Geolocation API を使用して座標を取得したいとします。

navigator.geolocation.getCurrentPosition(this.getCoordinates);

次に、コールバック関数で緯度と経度を取得します。

var coords = { "lat" : position.coords.latitude, "lng" : position.coords.longitude };

私の質問は、このコールバック関数が UserMap インスタンスにレポートを返して、userPosition プロパティを更新できるようにするにはどうすればよいですか? 明らかthis.userPosition = coords;にここでは機能しません。今では、コールバックを扱うのはほとんど無力だと感じています。ユーザーから更新された座標を取得するたびに新しいオブジェクトを作成する必要がないことを願っています。

間違ったコードは次のとおりです。

    function UserMap() {
        this.map = L.map('map', {"zoomControl" : false});
        this.userPosition = {};
        this.boundary = {};

        if (navigator.geolocation){
            navigator.geolocation.getCurrentPosition(this.getCoordinates);
        }
        else{ alert("Geolocation is not supported by your browser.");
            return false;
        }
        this.map.on("click", function(e) {
            alert("Lat: " + e.latlng.lat + " Lng: " + e.latlng.lng);
        });
        this.display();
    }

    UserMap.prototype.getCoordinates = function(position) {
        var coords = { "lat" : position.coords.latitude, "lng" : position.coords.longitude};
        this.userPosition = coords; // I understand why this line won't work, but can't find a workaround solution
    }

    UserMap.prototype.display = function() {
        var lat = this.userPosition.lat;
        var lng = this.userPosition.lng;
        this.map.setView([lat, lng], 18);
        var tile = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
            minZoom: '16',
        }).addTo(this.map);
        L.marker([lat, lng]).addTo(this.map)
            .bindPopup('You are here!')
            .openPopup();
    }