Javascript回调和地理位置API

我对Javascript非常陌生，遇到了自己无法解决/理解的问题

假设我使用“userPosition”属性创建了“UserMap”类，并希望使用地理位置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();
    }

函数UserMap（）{
this.map=L.map（'map'，{“zoomControl”：false}）；
this.userPosition={}；
this.boundary={}；
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（this.getCoordinates）；
}
else{alert（“您的浏览器不支持地理位置”）；
返回false；
}
此.map.on（“单击”，函数（e）{
警报（“Lat:+e.latlng.Lat+”Lng:+e.latlng.Lng）；
});
这个.display（）；
}
UserMap.prototype.getCoordinates=函数（位置）{
var coords={“lat”：position.coords.latitude，“lng”：position.coords.longitude}；
this.userPosition=coords；//我理解为什么这行行不通，但找不到解决方案
}
UserMap.prototype.display=函数（）{
var lat=this.userPosition.lat；
var lng=this.userPosition.lng；
此.map.setView（[lat，lng]，18）；
var tile=L.tileLayer（'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'{
属性：“©；参与者”，
minZoom:'16'，
}).addTo（此.map）；
L.标记（[lat，lng]）添加到（本地图）
.bindPopup（'您在这里！'）
.openPopup（）；
}
在回调中，您可以使用ajax调用，它将以非阻塞方式与服务器交互

如果使用jquery，可以执行以下操作：

 $.ajax({
   url: "test.html",
   data: coords
})
.done(function() {
  alert("done")
});

您可以使用map.locate函数和locationfound事件来完成以下操作：
检查此小提琴：并检查定位文档：

基本上，我删除了getCoordinates函数，并将其替换为对locate函数的调用和“locationfound”事件的事件处理程序：

map.locate（{setView:true}）；
map.on（'locationfound'，函数（数据）{
L.marker（map.getCenter）.addTo（map）
.bindPopup（'您在这里！'）
.openPopup（）；
});

希望对您有所帮助
您需要在
this.getCoordinates=function（）中设置
this.userPosition
。请显示整个代码。它不会将值放入属性，因为它是回调函数。这就是重点。问题是你无法访问一些尚未创建的内容
navigator.geolocation.getCurrentPosition（）
是异步的，这意味着它在得到结果之前不会在其success函数中设置值。因此，在属性存在之前调用方法。使用AJAX。在返回值方面，AJAX会遇到问题，而
onreadystatechange
将返回到
XMLHttpRequest
。这使得实现你的愿望可能很困难。有很多事情要考虑。好的，谢谢，我可能会重新考虑我的设计。