Change Polyline Color Dynamically
Currently you are not storing the polyline inside the User-object, you should first do it to make the line accessible later:
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);
};
now you will be able to higlight a line:
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
mkyong
Updated on October 20, 2020Comments
-
mkyong over 3 years
I have a web app that will draw a polyline for each user (tracks movement), and I'd like to incorporate some functionality that allows the web app user to 'focus' on a certain user by changing the color of the polyline. It will have to first change all the polylines to red, and then change the selected polyline to blue. I think this is best to avoid focusing on one line, then trying to focus on another and having them both blue. I'm really not sure how to implement this, but I have functionality that returns a user id when the name is pressed. I just need to iterate over each object (each user's polyline) to change them to red first, then change the specific one to blue. Here is some code below. If you could point me in the right direction, I'd appreciate it. Thanks. This is a condensed version of my code so I hope it provides enough information.
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();
-
mkyong about 12 yearsWhere do I put the
Users.prototype...
function? In Users() or User(id)? I have not yet used prototypes so I'm not sure how they work. Do I have to move the first function (this.polyline...) to Users()? I addedthis.
to the same places you did, and it works as it should. I'm just not sure how I would go about moving all of that. -
mkyong about 12 yearsI got it working! I should have tried it before I asked for clarification. Thanks for making it so simple!