1

Я пишу приложение JS, где я рисую много полилиний, используя массив точек, но в любой точке у меня есть некоторые дополнительные свойства в этой точке (данные GPS, скорость и т. Д.).Расширение мыши и мыши.

Я хочу показать эти дополнительные реквизиты onmouseover или onmouseclick.

У меня есть два пути:

  1. используют стандартные полилинии и обработчик событий. Но в этом случае я не могу определить дополнительные свойства для начальной точки этой полилинии, поэтому я не могу сохранить эти реквизиты в свойствах полилинии. Существует одно решение - сохранить в массиве дополнительные свойства и попытаться найти их по LatLng первой точки полилинии, но это слишком медленно, я думаю ..

  2. удлиняет полилинию и сохраняет дополнительные свойства в новом объекте, но я могу «т расширить события мыши :(

чтобы расширить полилинию Я использую этот код:

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; 
} 

и создать новый объект для цикла (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 - массив точек (всего два очка),
  • я - индекс точки тока
  • 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); 
... 
} 

Но в этом случае я всегда получаю один и тот же идентификатор в консоли ..

Когда я использую

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? 
... 
} 

Я не знаю, как получить родительские полилинии уволило событие?

+0

Я отвечаю на свой вопрос - это сделано, я просто есть некоторые проблемы с использованием «для» вместо «$ .each» :) – user2639494

ответ

1

Я отвечаю на свой вопрос - это сделано, я просто есть некоторые проблемы с использованием «для» вместо «$ .each» :)

Перед тем, как использовать:

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); 
} 
+0

ли вам когда-нибудь выяснить, почему реализация цикла for не работает? Я пытаюсь избежать jQuery, если это возможно, поскольку он не нужен нигде в моем приложении. – robguinness

Смежные вопросы