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