Thay đổi Polyline Color Dynamically

Question

Tôi có một ứng dụng web sẽ vẽ một polyline cho mỗi người dùng (theo dõi chuyển động) và tôi muốn kết hợp một số chức năng cho phép người dùng ứng dụng web 'tập trung' vào một người dùng nhất định bằng cách thay đổi màu của polyline. Trước tiên, nó sẽ phải thay đổi tất cả các polylines thành màu đỏ, và sau đó thay đổi polyline được chọn thành màu xanh lam. Tôi nghĩ điều này là tốt nhất để tránh tập trung vào một dòng, sau đó cố gắng tập trung vào một dòng khác và có cả hai màu xanh lam. Tôi thực sự không chắc chắn làm thế nào để thực hiện điều này, nhưng tôi có chức năng trả về một id người dùng khi tên được nhấn. Tôi chỉ cần lặp qua từng đối tượng (mỗi polyline của người dùng) để thay đổi chúng thành màu đỏ trước, sau đó thay đổi màu xanh lam. Đây là một số mã dưới đây. Nếu bạn có thể chỉ cho tôi đúng hướng, tôi sẽ đánh giá cao nó. Cảm ơn. Đây là một phiên bản đặc biệt của mã của tôi vì vậy tôi hy vọng nó cung cấp đủ thông tin.

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

Hiện tại bạn đang không lưu trữ polyline bên trong User-đối tượng, trước tiên bạn nên làm điều đó để làm cho đường tiếp cận sau:

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

bây giờ bạn sẽ có thể higlight một dòng:

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