擴展多段線並處理鼠標事件

Question

我寫了一個JS應用程序，使用點數組繪製了很多折線，但是在這一點上我還有一些附加屬性（GPS數據，速度等）。

我想顯示這些額外的道具onmouseover或onmouseclick事件。

我有兩種方法：

1. 使用標準的折線和事件處理程序。但在這種情況下，我無法確定此多段線起點的其他屬性，因爲我無法將這些道具保存在多段線屬性中。有一種解決方案 - 保存數組附加屬性，並嘗試通過第一點折線的LatLng找到它們，但它太慢我猜..

2. 擴展折線並保存新對象中的其他屬性，但我可以「T延長鼠標事件:(

爲了延長折線我使用此代碼：

function myPolyline(prop, opts){ 
    this.prop = prop; 
    this.Polyline = new google.maps.Polyline(opts); 
} 

myPolyline.prototype.setMap = function(map) { 
    return this.Polyline.setMap(map); 
} 

myPolyline.prototype.getPath = function() { 
    return this.Polyline.getPath(); 
} 

myPolyline.prototype.addListener= function(prop) { 
    return this.Polyline.addListener(); 
} 

myPolyline.prototype.getProp= function() { 
    return this.prop; 
} 

myPolyline.prototype.setProp= function(prop) { 
    return this.prop = prop; 
} 

，並創建在for循環新目標（i - 索引點的陣列當前點）等即：

var polyline_opts = { 
    path: line_points, 
    strokeColor: color, 
    geodesic: true, 
    strokeOpacity: 0.5, 
    strokeWeight: 4, 
    icons: [ 
     { 
     icon: lineSymbol, 
     offset: '25px', 
     repeat: '50px' 
     } 
    ],    
    map: map 
}; 

var add_prop = { 
    id: i, 
    device_id: device_id 
}; 

... 

devices_properties[device_id].tracks[(i-1)] = new myPolyline(add_prop, polyline_opts); 

其中：

• line_points - 點的陣列（只是2個點），
• I - 當前點指數
• devices_properties [DEVICE_ID] .tracks - 延長折線的陣列（具有加性能）經我DEVICE_ID指數

像我設置的事件處理程序後：

var tmp = devices_properties[device_id].tracks[(i-1)]; 
google.maps.event.addListener(tmp.Polyline, 'click', function(e) { 
... 
console.log(tmp.prop.id); 
... 
} 

但在這種情況下，我總是在控制檯的同一ID ..

當我使用

google.maps.event.addListener(devices_properties[device_id].tracks[(i-1)].Polyline, 'click', function(e) { 
... 
console.log(???); // How to get parent of polyline fired the event? 
... 
} 

我不知道怎麼去折線的父觸發事件？

Answer 1

我回答我的問題 - 它的完成，我只是有一些麻煩，使用「爲」，而不是「$。每個」 :)

以前我用：

for (i = 1; i < devices_properties[device_id].history_points.length; i++) { 
    ... 
    create myPolyline 
    ... 
} 

，它的不起作用 - 創建了一個事件句柄。

後：

$.each(devices_properties[device_id].history_points, function(i, tmp){ 
    ... 
    create myPolyline() 
    ... 
} 

和它的作品 - 創造了很多的事件處理程序。

爲了處理事件中，我用這個：

google.maps.event.addListener(c_polyline.Polyline, 'mouseover', function(e) { 
    var prop = c_polyline.getProp(); 
    ... 
    console.log(prop.id, prop.device_id); 
}