使用 setInterval 使用 JavaScript class 模拟 Google 地图标记放置

Question

我想通过以下描述在JavaScript中创建一个class。

此 class 是使用 Google 地图模拟卡车在路线上移动的一部分。我想要的是在 class 方法中使用 setInterval 就好像它是一个函数一样，以便能够在使用不同参数重复实例化对象后模拟许多标记。

class RouteMarker { 
    constructor(marker,pointsArray,i) {
        this.marker = marker;
        this.pointsArray = pointsArray;
        this.i=i;
    }
    main() {        
        var myVar = setInterval(function(){this.myTimer}, 7000);
    }
    myTimer() {
        alert('o');
        this.setPostionM(this.i);
        this.i++; 
    }
    setPostionM(key) {     
        this.marker.setPosition(this.pointsArray[key]);     
    }
}

Answer 1

你的代码就在那里。

快速运行向下：

修复了代码中的一些小问题，主要是格式化
确保当 .myTimer() 函数运行遍历所有点时，它将自行停止 (this._intervalId)。
为了快速演示，将 7000 毫秒间隔缩短为 1000
.myTimer() 函数将使用当前索引 (this.i)

alert()

创建了一个模拟程序 class MockMarker，这只是 Google 地图 API 的一个简单的工作占位符，因此您可以运行示例代码这里。
MockMarker 注销当前给定位置

class RouteMarker { 
    constructor(marker, pointsArray, i) {
        this.marker = marker;
        this.pointsArray = pointsArray;
        this.i = i;
    }
    
    main() {
        this._intervalId = setInterval(this.myTimer.bind(this), 1000);
    }

    myTimer() {
        alert('index: ' + this.i);
        this.setPostionM(this.i);
        this.i++;

        if (this.i >= this.pointsArray.length ) {
            console.log('stop myTimer');
            clearInterval(this._intervalId);
        }
    }

    setPostionM(key) {
        this.marker.setPosition(this.pointsArray[key]);
    }
}

class MockMarker {
    setPosition(array) {
        console.log('position: ' + array);
    }    
}

const mockMarker = new MockMarker();
const routeMarker = new RouteMarker(mockMarker, [[10.21, 70.13], [14.62, 56.71], [22.34, 67.26]], 0);

routeMarker.main();

使用 setInterval 使用 JavaScript class 模拟 Google 地图标记放置

Simulate Google Maps Markers placement with a JavaScript class using setInterval

javascript

google-maps

setinterval

google-maps-markers