Javascript 处理多个标记时，在标记单击事件后显示多段线。

我正在开发一个使用谷歌地图API v3的web应用程序。我在一个小时内创建了约400个标记，这些标记被推到currentlyDisplayedMarkers[]中。对于每个标记，我将创建一条包含其过去位置的多段线。这样行。但是，我只想在单击特定标记时显示标记的多段线。我创建了一个名为addClickHandler的函数，在该函数中，我为每个标记定义了onClick侦听器。单击标记时，应将多段线添加到地图中

单击标记时，多段线不会显示在地图上。 你知道我做错了什么吗

    if (!found)
                   {
                       var LatLng = { lat: data[i].Plots[0].Latitude, lng: data[i].Plots[0].Longitude };
                       createMarker(LatLng, 90, data[i].TrackNumber);
                       drawPolyline(data[i].Plots);
                   }
function createMarker(markerLatLng, direction, id) {
var iconImage = {
    path: 'M265.54,0H13.259C5.939,0,0.003,5.936,0.003,13.256v252.287c0,7.32,5.936,13.256,13.256,13.256H265.54c7.318,0,13.256-5.936,13.256-13.256V13.255C278.796,5.935,272.86,0,265.54,0z M252.284,252.287H26.515V26.511h225.769V252.287z',
    strokeColor: '#800000',
    scale: 0.05,
    fillOpacity: 1,
    strokeWeight: 1
}
//draw the marker and attach it to the map
marker = new google.maps.Marker({
    position: markerLatLng,
    map: map,
    icon: iconImage,
    draggable: false
});
//add aditional properties to the marker
marker.metadata = {
    id: id
};

//add the marker to the markers array
currentlyDisplayedMarkers.push(marker);
for (var j = 0; j < currentlyDisplayedMarkers.length; j++) {
    var pathMarker = currentlyDisplayedMarkers[j];
    addClickHandler(pathMarker);
}
}
function addClickHandler(pathMarker) {
google.maps.event.addListener(pathMarker, 'click', function () {
    flightPath.setMap(map);
});
}

if（！found）
{
var-LatLng={lat:data[i]。绘图[0]。纬度，lng:data[i]。绘图[0]。经度}；
createMarker（LatLng，90，数据[i].轨道号）；
绘制多段线（数据[i]。绘图）；
}
函数createMarker（markerLatLng、方向、id）{
变量iconImage={
路径：“M265.54,0H13.259C5.939,0,0.003,5.936,0.003,13.256v252.287c0,7.32,5.936,13.256,13.256,13.256,13.256H265.54c7.318,0,13.256-5.936,13.256-13.256V13.255C278.796,5.935272.86,0265.54,0z M252.284252.287H26.51526.511h225.769Z”，
strokeColor:“#800000”，
比例：0.05，
不透明度：1，
冲程重量：1
}
//绘制标记并将其附着到地图上
marker=新的google.maps.marker({
职位：markerLatLng，
地图：地图，
图标：iconImage，
可拖动：错误
});
//将传统特性添加到标记
marker.metadata={
id:id
};
//将标记添加到标记数组中
当前显示的Markers.push（标记器）；
对于（var j=0；j

您应该将下面的块移动到

createMarker（）函数的外部

for (var j = 0; j < currentlyDisplayedMarkers.length; j++) {
    var pathMarker = currentlyDisplayedMarkers[j];
    addClickHandler(pathMarker);
}

（var j=0；j

每次创建一个标记时，只需向每个标记添加eventhandler，就不需要遍历当前显示的Makers集合

只需在刚刚创建的标记上添加一个eventhandler就足够了

解决方案：

---

将迭代移动到标记创建函数之外，或者只为刚刚在标记创建函数中创建的标记添加一个事件处理程序。

请提供一个示例来说明问题。如果我要显示更多代码，那就太多了。如果您对这件事感兴趣，我认为代码已经过测试，可读性足够。如果我提供完整的代码，我还必须发布数据源，这恐怕是不可能的。提供测试代码的测试数据，不必是“真实”的数据。我认为任何有足够经验的人都会很容易“看到”问题。我很确定任何类型的调试在这里都是无用的，所以我不认为提供更多信息有什么意义。在我看来，对我的问题的帮助只能来自于以前见过这种情况的人。可能重复的-谢谢！事实上，在那里设置环路是一种无用的做法。但是，我仍然没有看到任何更改。我假设您的整个代码都在另一个索引为

I

的迭代中，并且我看到在每个循环中，您在创建标记后创建了一个多段线对象。我假设在

drawPolyline

函数中，您已将currentlyDisplayedMarkers指定给flightPath多段线。如果没有任何“单击”事件，则逻辑是同步的，因此在创建每个标记后，将绘制flightPath并将其设置为映射。但是，一旦添加了“click”事件，逻辑就是异步的。上一个flightPath将替换为数据集中的最后一个对象。单击标记时将不会有任何更改。您需要做的是创建另一个名为

var flightPaths=[]

的集合，并在drawPolyline函数中将每个路径及其

id

推送到该新集合，然后编写一个子函数并调用它，通过Marker.metadata中的

id

从该集合中获取flightPath。最后是setMap。