Расширить полилинию и обработать событие мыши

Я пишу приложение 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;
}

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

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

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

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

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


google-maps-api-3 event-handling mouseevent polyline extending
person user2639494    schedule 31.07.2013    source источник
comment
Я отвечаю на свой вопрос - это сделано, у меня просто есть некоторые проблемы с использованием вместо $.each :)   -  person user2639494    schedule 10.08.2013

Ответы (1)


arrow_upward
1
arrow_downward

Я отвечаю на свой вопрос - это сделано, у меня просто есть некоторые проблемы с использованием «для» вместо «$.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);
}
person user2639494    schedule 10.08.2013
comment
Вы когда-нибудь выясняли, почему реализация цикла for не работает? Я стараюсь избегать jQuery, если это возможно, так как он больше не нужен в моем приложении. - person robguinness; 10.10.2014