Разширете полилинията и обработете събитието на мишката

Пиша 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