我有一个网络应用程序,将为每个用户绘制一个折线(跟踪运动),我想要纳入一些功能,允许网络应用程序用户通过更改多边形的颜色“聚焦在某个用户”.它必须首先将所有折线更改为红色,然后将所选折线更改为蓝色.我认为这是最好避免专注于一条线,然后试图集中在另一条线上,让他们都是蓝色的.我真的不知道如何实现这一点,但是我有功能,当按下该名称时返回一个用户标识.我只需要遍历每个对象(每个用户的折线)将它们首先变为红色,然后将具体的一个更改为蓝色.下面是一些代码.如果你能指出我正确的方向,我会很感激.谢谢.这是我的代码的精简版本,所以我希望它提供足够的信息.
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();
解决方法
目前,您没有将折线存储在用户对象内,您应该首先进行以下操作:
this.drawPolyline = function(loc) { this.polyline = new google.maps.Polyline({//<--note the this map: map,strokeWeight: 2 }); this.polyline.setMap(map); };
现在你将能够突出一行:
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