Question

我试图编写一些JavaScript来处理谷歌地图的一系列功能，但是可以在一个页面上重复使用多个地图。

我遇到的问题是函数内部调用的函数似乎忽略了我的javascript＆＃39;类＆＃39;顶部声明的变量。（我知道它实际上不是一个班级。）

geocodeAddress 函数调用Googles geocoder.geocode API函数，该函数接受以结果作为参数调用的函数。在此结果函数中，我无法访问我的班级中的其他属性。并且所有都设置为“未定义”。我也无法调用任何其他功能。

有没有人有任何想法？这是否可能，或者我应该放弃这种风格，只是将地图对象从方法传递给方法，使其可以与其他地图重复使用？

function GoogleMap(settings) {

var map;

this.zoom = settings.zoom;
this.center = new google.maps.LatLng(settings.lat, settings.lng);
this.mapContainerId = settings.mapContainerId;

this.initializeGoogleMap = function initializeGoogleMap(mapOptions) {
    this.map = new google.maps.Map(document.getElementById(this.mapContainerId), { zoom: this.zoom, center: this.center });
}

this.addMapMarker = function addMapMarker(markerOptions) {
    // add a marker here        
}

this.geocodeAddress = function geocodeAddress(location) {
    // I have full access to this.zoom, this.center etc. here
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({ 'address': location }, function (results, status) {

        // this.zoom, this.center etc. are inaccessible here and return undefined.
        if (status == google.maps.GeocoderStatus.OK) {
            this.map.setCenter(results[0].geometry.location);

            this.addMapMarker({ center: results[0].geometry.location, draggable: true, title: location });
        } else {
            alert('Could not find the address entered');
        }
    });
}

google.maps.event.addDomListener(window, 'load', this.initializeGoogleMap());

};

由于

Answer 1

回调本身不会为您保留this的值，因此您需要做一些事情来为您设置它。您可以创建闭包变量，也可以将.bind()与回调一起使用。

这是一个使用闭包变量self的解决方案：

this.geocodeAddress = function geocodeAddress(location) {
    var self = this;
    // I have full access to this.zoom, this.center etc. here
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({ 'address': location }, function (results, status) {

        // this.zoom, this.center etc. are inaccessible here and return undefined.
        if (status == google.maps.GeocoderStatus.OK) {
            self.map.setCenter(results[0].geometry.location);

            self.addMapMarker({ center: results[0].geometry.location, draggable: true, title: location });
        } else {
            alert('Could not find the address entered');
        }
    });
}

使用.bind()的解决方案：

this.geocodeAddress = function geocodeAddress(location) {
    // I have full access to this.zoom, this.center etc. here
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({ 'address': location }, function (results, status) {

        // this.zoom, this.center etc. are inaccessible here and return undefined.
        if (status == google.maps.GeocoderStatus.OK) {
            this.map.setCenter(results[0].geometry.location);

            this.addMapMarker({ center: results[0].geometry.location, draggable: true, title: location });
        } else {
            alert('Could not find the address entered');
        }
    }.bind(this));
}

在我的javascript＆＃39;类中调用内部函数的问题＆＃39;

1 个答案: