Javascript 在画布上绘制循环中的点处于禁用状态

我试图在画布上绘制，但我绘制的点最终位于错误的位置。我知道这与循环有关（很可能是变量范围和事件序列），因为当我一次画一个数据点时，它们会显示在正确的位置。只要我在一个包含多个元素的数组上循环，这些点就不会在正确的位置结束（我在谷歌地图上绘制它们-是的，我使用了他们的javascript api，但我将做一些比他们的api更为定制的事情。但使用他们的api绘制点是我如何验证我的点绘制在正确的位置（当一次绘制一个点时），但当我在数组上循环时，却最终位于错误的位置）

注意-数据数组包含如下对象：

{ _id: 5362a54a038a09d66ac9b36d,
location: { lat: 46.368619, long: -109.027793 } }

这里有一个问题的例子：绿色的点是在画布上绘制的，黄色和紫色的点是使用google的api绘制的。请注意，绘制的第一个点与正确的位置重叠。此外，如前所述，如果我只单独绘制第三个点，或者单独绘制其中任何一个点，那么它们将显示在正确的位置

---

在阅读这个答案之前，我还准备了一个

，坐下来，保证不要把头撞到墙上！：-）

您的代码非常好，您只是认为纬度与“x”坐标匹配，经度与“y”坐标匹配。
但事实上，另一种方法是正确的：如果有疑问，请再次查看定义

如果你看到你的“错误”结果，那就是正确的旋转和缩放结果

因此，只要1）将这里和那里的经度与纬度进行交换，2）取经度的对称性，就可以与谷歌的结果完美匹配：

非常好的结果：

---

（from/ratio）+（Left/Top）和centerX/Y是函数的变量，不要在函数外部定义它们。这不是根本原因，但会更干净。你能不能也显示工作代码，并描述或加入“不在正确的位置”的图片？是的，完成了。我最初在里面定义了这些，我将其分解，以确保这不是问题所在！我简直不敢相信！我想我现在有点困惑了——例如，fromTop=Math.abs（left-point.location.lat）；-这感觉不对。那应该叫左起？你用它除以宽度来确定从顶部开始的比率？请解释好的，好的：-）我花了（最后没那么长时间）时间才把名字弄对，请看我的编辑。

{ _id: 5362a54a038a09d66ac9b36d,
location: { lat: 46.368619, long: -109.027793 } }

// during the init : 
var bounds = map.getBounds();
var topLeft = bounds.getNorthEast();
var bottomRight = bounds.getSouthWest();
var left = topLeft.lng();
var top = topLeft.lat();
var right = bottomRight.lng();
var bottom = bottomRight.lat();
var height = Math.abs(top - bottom);
var width = Math.abs(left - right);

// and in your each loop : 
var fromTop = Math.abs(top - point.location.lat);
var fromLeft =  Math.abs(left - point.location.long);
var ratioTop = fromTop / height;
var ratioLeft = fromLeft / width;

var centerX = canvasWidth - Math.floor(ratioLeft * canvasWidth);
var centerY = Math.floor(ratioTop * canvasHeight);