Mik*_*ike 5 javascript google-maps polyline google-maps-api-3 google-polyline
我正在绘制一条具有相当多的纬度/经度点(~ 1000)的折线。我有两个滑块(开始和结束),允许用户调整时间范围,然后更新折线以显示这两个时间之间的数据。
我的更新算法是这样的:
var mvcPath = new google.maps.MVCArray();
for (var i = 0; i < gpsData.length; i++) {
if (gpsData[i]['timestamp'] <= endDate &&
gpsData[i]['timestamp'] >= startDate) {
mvcPath.push(gpsData[i]['location']);
}
}
this.path.setPath(mvcPath);
Run Code Online (Sandbox Code Playgroud)
现在奇怪的是,当我拖动结束滑块时,线条会按预期重新绘制,但是当我拖动开始滑块时,它会正确地重新绘制线条,除非在高缩放级别下,线条的某些部分似乎会稍微移动(它不会这是放大近时的情况)。我认为这可能与谷歌应用于折线的抗锯齿算法有关,但当我移动末端滑块时它不会这样做。
有谁知道是什么原因导致这种闪烁?
我已经破解了一个目前看来有效的解决方案。我试图保持点数一致,因为 API 似乎不喜欢我在前面添加点数。
假设我有一组 1000 个点,我只想显示 200 - 900 个点。如果我绘制点 200 的位置,200 次,然后将其余数据绘制到点 900,它就会停止闪烁。要显示 10 - 330,我将绘制点 10、10 次,然后将其余数据绘制到点 330。
我想这与谷歌内部存储地图线条的方式有关,如果您添加到线条的前面,它可能必须重新索引整个数组并从头开始重新绘制线条。
我暂时不会接受答案,以防有人提出更好的答案。
| 归档时间: |
|
| 查看次数: |
1529 次 |
| 最近记录: |