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

Custom js function 'Cannot read property 'zoom' of undefined '

本文关键字：属性 缩放 未定义 读取 js 函数 自定义      更新时间：2023-09-26

在完成了关于tuts+的谷歌地图教程之后，我决定构建一些自定义函数。链接

在"controlZoom"功能中，我试图设置一些自定义控件，但我无法访问"this.gMap"：

    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);

但不在"点击"事件中。

我在这里调用我的自定义函数：链接

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

'无法读取未定义'的属性'zoom'

事件监听器中的"这个"可能是单击的加号/减号按钮。你可以通过使用一个"self"变量来解决这个问题：

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));
}

这些修复程序假设controlZoom中的"this"是具有gMap的对象！我想是的，因为你说this.gMap.getZoom（）行返回了正确的计数。因此，我的两个建议都应该有效，但如果无效，请尝试通过添加进行调试

console.debug(this)

检查"这"是否是您所期望的。

关于使用++的说明

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

var n = 0
function report(p) { console.log(p) }
report(n++)
0

你用n++调用"report"函数，你会认为这可能会导致它打印出"1"。事实上，它实际上打印出了"0"。这是因为n在递增++之前被传递到报表中。

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

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

那么在将计数传递给缩放函数之前，您将确保该计数是递增的。

您应该使用setZoom方法：

this.gMap.setZoom(count++);

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

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

然后

self.gMap.setZoom(count++);

那就行了。

在函数的作用域中，未定义gMap。未定义的变量没有任何属性，因此缩放属性无法工作。

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

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

相关文章：