动态更改折线颜色

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