Динамическое изменение цвета полилинии - PullRequest
Новая
       1

Динамическое изменение цвета полилинии

10 голосов
/ 23 марта 2012

У меня есть веб-приложение, которое рисует ломаную линию для каждого пользователя (отслеживает движение), и я хотел бы включить некоторые функции, которые позволяют пользователю веб-приложения «сфокусироваться» на определенном пользователе, изменив цветломаная.Сначала нужно изменить все полилинии на красный, а затем изменить выбранную полилинию на синий.Я думаю, что лучше всего не фокусироваться на одной строке, а затем пытаться сфокусироваться на другой, чтобы они оба были голубыми.Я действительно не уверен, как реализовать это, но у меня есть функциональность, которая возвращает идентификатор пользователя при нажатии имени.Мне просто нужно перебрать каждый объект (полилинию каждого пользователя), чтобы сначала поменять их на красный, а затем на конкретный синий.Вот код ниже.Если бы вы могли указать мне правильное направление, я был бы признателен.Благодарю.Это сжатая версия моего кода, поэтому я надеюсь, что он предоставит достаточно информации. 

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

1 Ответ

18 голосов
/ 24 марта 2012

В настоящее время вы не сохраняете ломаную линию внутри объекта User, сначала вы должны сделать это, чтобы сделать строку доступной позже: 

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

теперь вы сможете выделить строку: 

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
...