Question

在关注tuts +的google地图教程后，我决定构建一些自定义函数。 Link

在＆＃39; controlZoom＆＃39;函数我正在尝试设置一些自定义控件但是我无法访问＆＃39; this.gMap＆＃39;：

    controlZoom:function(){
        var plusZoom = document.getElementsByClassName('icon-plus-sign')[0],
            minusZoom = document.getElementsByClassName('icon-minus-sign')[0],
            count = this.gMap.getZoom();
        plusZoom.addEventListener('click', function() {
            this.gMap.zoom(count++);
        });
        minusZoom.addEventListener('click', function() {
            this.gMap.zoom(count--);
        });
    }

我可以访问以下内容：

console.log(count);

但不在＆＃39;点击事件中。

我在这里调用自定义函数：link

当我尝试单击时，我在控制台中收到以下错误：

＆＃39;无法读取属性＆＃39;缩放＆＃39;未定义＆＃39;

Answer 1

＆＃39;这＆＃39;在你的事件监听器中可能是被点击的加/减按钮。你可以通过使用“自我”来解决这个问题。变量：

controlZoom:function(){
    var self = this;
    var plusZoom = document.getElementsByClassName('icon-plus-sign')[0],
        minusZoom = document.getElementsByClassName('icon-minus-sign')[0],
        count = this.gMap.getZoom();
    plusZoom.addEventListener('click', function() {
        self.gMap.zoom(count++);
    });
    minusZoom.addEventListener('click', function() {
        self.gMap.zoom(count--);
    });
}

或使用.bind：

controlZoom:function(){
    var plusZoom = document.getElementsByClassName('icon-plus-sign')[0],
        minusZoom = document.getElementsByClassName('icon-minus-sign')[0],
        count = this.gMap.getZoom();
    plusZoom.addEventListener('click', function() {
        this.gMap.zoom(count++);
    }.bind(this));
    minusZoom.addEventListener('click', function() {
        this.gMap.zoom(count--);
    }.bind(this));
}

这些修正案假设“这个＆＃39; inside controlZoom是具有gMap的对象！我认为是，因为你说this.gMap.getZoom（）行返回正确的计数。所以我的两个建议都应该有效，但如果没有，可以通过添加

来尝试调试

console.debug(this)

检查这个＆＃39;是你所期待的。

关于使用++的说明

++是一个运算符，count ++将递增计数并返回。但传递给函数的值将是在递增之前的count。您可以通过以下控制台会话说服自己：

var n = 0

function report(p) { console.log(p) }

report(n++)
0

您拨打了＆＃39;报告＆＃39;使用n ++的功能，您可以认为它可能会导致它打印出来＆＃39; 1＆＃39;。实际上它实际上是打印出来的＆＃39; 0＆＃39;。这是因为n在递增++之前被传递到报告中。

在您的情况下，第一次调用缩放（计数++）函数时，实际上是使用现有的count值调用它，然后才会增加计数。所以看起来好像需要两次点击才能放大。安全的方法是：

    plusZoom.addEventListener('click', function() {
        count++;
        this.gMap.zoom(count);
    }.bind(this));

然后在将其传递给缩放功能之前，您将确保计数增加。

Answer 2

您应该使用setZoom方法：

this.gMap.setZoom(count++);

您需要保存对this的引用并删除bind：

var self = this,
    plusZoom = document.getElementsByClassName('icon-plus-sign')[0],
    // ...

然后

self.gMap.setZoom(count++);

它会起作用。

Answer 3

在函数范围内，未定义gMap。未定义的变量没有任何属性，因此缩放属性将不起作用。

gMap目前仅在您的原型中定义，以及作为其一部分的函数，例如您的controlZoom。当您添加click事件侦听器时，您没有传入gMap，并且这些函数不属于原型，因此this.gMap将无效。

您必须在全局中定义gMap，或使用原型Mapster引用它。

自定义js函数'无法读取属性'缩放'未定义'

3 个答案: