ポリラインの色を動的に変更する

Question

私は、各ユーザーにポリラインを描く（動きを追跡する）Webアプリケーションを持っています.Webアプリケーションユーザーが特定のユーザーに「フォーカスする」ことを可能にする機能を組み込んでいますポリラインの色最初にすべてのポリラインを赤に変更してから、選択したポリラインを青に変更する必要があります。私は、これが一行に集中するのを避け、別のものに集中して、両方を青くすることをお勧めします。私は実際にこれを実装する方法がわかりませんが、名前を押したときにユーザーIDを返す機能があります。各オブジェクト（各ユーザーのポリライン）を繰り返し赤で表示し、次に特定のものを青に変更するだけです。以下にいくつかのコードを示します。あなたが正しい方向に私を指すことができれば、私はそれを感謝します。ありがとう。これは私のコードが要約されているので、十分な情報が得られることを願っています。

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

現在あなたが最初後で行にアクセスできるようにそれを行う必要があり、ユーザーがオブジェクト内のポリラインを格納されていません。

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

今はラインをhiglightすることができるようになります。

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