Javascript 如何向页面添加2个OpenLayer标记动画？Clickevent似乎已被覆盖

我在（python）flask应用程序中实现了一个

然而，在我用于标记动画的数据集中，我有一个额外的路径，我也想显示一个动画

当我添加代码来处理第二个动画时，就像第一个动画的控件被覆盖一样，我不知道如何避免这种情况发生。我尝试将所有变量重命名为1和2，以避免它们相互覆盖，但出于某种原因，它似乎仍然覆盖了控件

我创造了一个例子来说明这个问题。如果单击“贴图1”下的“开始动画”，它将在“贴图2”上运行动画。我刚刚在我的小提琴中使用了下面的过程，但最初我在for循环中运行了两次代码，以提取两条路线，然后绘制地图

Route points for Map 1
Set up Map 1
Bind functions to Map 1 buttons

Route points for Map 2
Set up Map 2
Bind functions to Map 2 buttons

---

我想我的问题在于隔离代码和/或绑定。首先，我尝试将函数（moveFeature、startAnimation、stopAnimation）重命名为各自的名称，并添加“1”或“2”。这并没有起到作用，同样也没有重命名所有变量。

您正在创建许多同名变量。例如，当覆盖函数StartAnimation时，按钮进入第二个（因为两个按钮都指向一个名为“StartAnimation”的函数）

为了避免这种情况，必须为每个映射创建不同的变量。这样可以避免使用无用的代码，并且可以确保每个元素都在使用它们应该使用的变量

我基于您的JSFIDLE代码构建了一个示例：

var locations1=[[53.44241609,6.84913974]，[53.44241894,6.84913726]，[53.44242156,6.84913385]，[53.44242473,6.84913076]，[53.44242859,6.84912721]，[53.44243324,6.84912446]，[53.44243724,6.84912303]，[53.44243994,6.84912206]，[53.44244199,6.849144444444741994]，[53.84849124278]，[1928491476.84916]，[53]，[84914444457]，[1926.84916]，[53.44245596, 6.84912085], [53.44246139, 6.84912072], [53.4424669, 6.84912142], [53.44247222, 6.84912279], [53.4424778, 6.84912454], [53.44248644, 6.84912644], [53.44249062, 6.84912761], [53.44249409, 6.84913057], [53.44249746, 6.84913362], [53.44250197, 6.84913592], [53.44250901, 6.84913629], [53.44251198, 6.84913792], [53.44251293, 6.84913988], [53.44251458, 6.84914126], [53.44251596, 6.8491434], [53.44251778, 6.84914727], [53.44251988, 6.8491501], [53.44252248, 6.8491531], [53.44252517, 6.84915473], [53.44252316, 6.84915181], [53.44252377, 6.84915124], [53.4425233, 6.84914949], [53.44252341, 6.84914848], [53.44252276, 6.84914827], [53.44252397, 6.84914868], [53.4425216, 6.84914477], [53.44252001, 6.84914287], [53.44252107, 6.84914273], [53.44251986, 6.84913869], [53.44251841, 6.84913463], [53.44251482, 6.84912822], [53.44251525, 6.84912649], [53.4425148, 6.84912465], [53.44251483, 6.84912049], [53.44251625, 6.84911749], [53.44251677, 6.84911403], [53.4425187, 6.84910978], [53.44252028, 6.84910694], [53.44252218, 6.84910622], [53.44252457, 6.84910649], [53.44252783, 6.84910729], [53.44253168, 6.84910888], [53.44253668, 6.84910943], [53.44254088, 6.84910976], [53.44254363, 6.84910898], [53.44254612, 6.84910996], [53.44254803, 6.84910946], [53.44255004, 6.84910945], [53.44255416, 6.84910766], [53.44256019, 6.84910343], [53.44256469, 6.84909908], [53.44256753, 6.84909764], [53.44257106, 6.84909639], [53.44257482, 6.84909654], [53.44257861, 6.84909769]];
var位置2=[[53.44241609,6.84913974]，[53.44241894,6.84913726]，[53.4424156,6.84913385]，[53.442473,6.84913076]，[53.44242859,6.84912721]，[53.44243324,6.84912446]，[53.44243724,6.84912303]，[53.44243994,6.84912206]，[53.44244199,6.84911994]，[53.44444474,6.84916.84458]，[19344916]，[53.44245596, 6.84912085], [53.44246139, 6.84912072], [53.4424669, 6.84912142], [53.44247222, 6.84912279], [53.4424778, 6.84912454], [53.44248644, 6.84912644], [53.44249062, 6.84912761], [53.44249409, 6.84913057], [53.44249746, 6.84913362], [53.44250197, 6.84913592], [53.44250901, 6.84913629], [53.44251198, 6.84913792], [53.44251293, 6.84913988], [53.44251458, 6.84914126], [53.44251596, 6.8491434], [53.44251778, 6.84914727], [53.44251988, 6.8491501], [53.44252248, 6.8491531], [53.44252517, 6.84915473], [53.44252316, 6.84915181], [53.44252377, 6.84915124], [53.4425233, 6.84914949], [53.44252341, 6.84914848], [53.44252276, 6.84914827], [53.44252397, 6.84914868], [53.4425216, 6.84914477], [53.44252001, 6.84914287], [53.44252107, 6.84914273], [53.44251986, 6.84913869], [53.44251841, 6.84913463], [53.44251482, 6.84912822], [53.44251525, 6.84912649], [53.4425148, 6.84912465], [53.44251483, 6.84912049], [53.44251625, 6.84911749], [53.44251677, 6.84911403], [53.4425187, 6.84910978], [53.44252028, 6.84910694], [53.44252218, 6.84910622], [53.44252457, 6.84910649], [53.44252783, 6.84910729], [53.44253168, 6.84910888], [53.44253668, 6.84910943], [53.44254088, 6.84910976], [53.44254363, 6.84910898], [53.44254612, 6.84910996], [53.44254803, 6.84910946], [53.44255004, 6.84910945], [53.44255416, 6.84910766], [53.44256019, 6.84910343], [53.44256469, 6.84909908], [53.44256753, 6.84909764], [53.44257106, 6.84909639], [53.44257482, 6.84909654], [53.44257861, 6.84909769]];
位置1.地图（功能（l）{
返回l.reverse（）；
});
位置2.地图（功能（l）{
返回l.reverse（）；
});
// ---------------------------
//定义地图1和事件
// ---------------------------
var route1=新ol.geom.LineString（位置1）
.transform（'EPSG:4326'，'EPSG:3857'）；
var routecords1=route1.getCoordinates（）；
var RouteLength 1=RouteCords1.length；
var routeFeature1=新的ol.功能({
键入：“路线”，
几何图形：路由1
});
var geoMarker1=新的ol.特征({
类型：“geoMarker”，
几何图形：新的ol.geom.Point（RouteCords1[0]）
});
var startMarker1=新的ol.功能({
键入：“图标”，
几何图形：新的ol.geom.Point（RouteCords1[0]）
});
可变端标记