Cambia colore polilinea dinamicamente

Question

Ho un'app Web che disegnerà una polilinea per ogni utente (movimento delle tracce) e vorrei incorporare alcune funzionalità che consentono all'utente della web app di "focalizzarsi" su un determinato utente cambiando il colore della polilinea. Dovrà prima cambiare tutte le polilinee in rosso, e quindi cambiare la polilinea selezionata in blu. Penso che sia meglio evitare di concentrarsi su una riga, quindi cercare di mettere a fuoco un altro e averli entrambi blu. Non sono sicuro di come implementarlo, ma ho funzionalità che restituiscono un ID utente quando viene premuto il nome. Ho solo bisogno di scorrere su ogni oggetto (polilinea di ogni utente) per cambiarli prima in rosso, poi cambiare quello specifico in blu. Ecco alcuni codici qui sotto. Se tu potessi indicarmi la giusta direzione, lo apprezzerei. Grazie. Questa è una versione condensata del mio codice quindi spero che fornisca informazioni sufficienti.

function User(id) { 
this.id = id; 

this.locations = []; 

this.mark = 0; 

this.getId = function() { 
    return this.id; 
}; 

this.addLocation = function(latitude, longitude) { 
    this.locations[this.locations.length] = new google.maps.LatLng(latitude, longitude);   
}; 
var polyline; 
this.drawPolyline = function(loc) { 
     polyline = new google.maps.Polyline({ 
     map: map, 
     path: loc, 
     strokeColor: "#FF0000", 
     strokeOpacity: 1.0, 
     strokeWeight: 2 
     }); 
    polyline.setMap(map); 
}; 

this.removePolyline = function() { 
    if (polyline != undefined) { 
     polyline.setMap(null); 
     } 
    } 
this.get_user_info = function(user_id) { 

var datastr = 'id=' + user_id; 
$.ajax({  
    type: "POST", 
    url: 'user_api.php', 
    data: datastr,  
    dataType: 'json',     
    success: function(data){ 
     var phone_id = data[0]; 
     var leftDiv = document.createElement("div"); //Create left div 
     leftDiv.id = "left"; //Assign div id 
     leftDiv.setAttribute("style", "float:left; width:66.5%; line-height: 26px; text-align:left; font-size:12pt; padding-left:8px; height:26px;"); //Set div attributes 
     leftDiv.style.background = divColor; 
     //user_name = document.createTextNode(fullName + ' '); //Set user name   
     a = document.createElement('a'); 
     a.href ="javascript:setFocus('" + phone_id + "');"; 
     a.innerHTML = fullName + ' '; 
     leftDiv.appendChild(a); 
     } 
    }); 
    } 
} 

function setFocus(phone_id) { 
    alert(phone_id); 
} 
function Users() { 
this.users = {}; 

this.createUser = function(id) { 
    this.users[id] = new User(id); 
    return this.users[id]; 
}; 

this.getUser = function(id) { 
    return this.users[id];  
}; 

this.removeUser = function(id) { 
    var user = this.getUser(id); 
    delete this.users[id]; 
    return user; 
}; 
} 

var users = new Users(); 

Answer 1

Attualmente non archiviano il poligono all'interno della User-oggetto, si deve prima fare per rendere la linea accessibile tardi:

this.drawPolyline = function(loc) { 
     this.polyline = new google.maps.Polyline({//<--note the this 
     map: map, 
     path: loc, 
     strokeColor: "#FF0000", 
     strokeOpacity: 1.0, 
     strokeWeight: 2 
     }); 
    this.polyline.setMap(map); 
}; 

ora si sarà in grado di higlight una linea:

Users.prototype.highlightLine=function(id) 
{ 
    for(var k in this.users) 
    { 
    this.users[k].polyline.setOptions({strokeColor:(id===k)?'blue':'red'}); 
    } 
} 

//use it 
users.highlightLine(5)//will highlight the line for user with id 5