我正在尝试更改已创建的div元素(标签)的位置,但我无法检索div元素的属性/属性。
function labelBox(cardinal, radius, root)
{
var labelID = 'MovingLabel'+ cardinal.ID;
this.position = convertlatlonToVec3(cardinal.lat, cardinal.lon).multiplyScalar(radius);
this.box = document.createElement('div');
a = document.createElement('div');
a.setAttribute("id", labelID);
a.innerHTML = cardinal.name;
$(a).data("id", cardinal.ID);
$(a).click(function(){
triggermarker = markers[parseInt($(this).data("id")) -1 ];
google.maps.event.trigger(triggermarker, 'click');
});
this.box.className = "spritelabel";
this.box.appendChild(a);
this.domElement = root;
this.domElement.appendChild(this.box);
}
labelBox.prototype.update = function()
{
camera.updateMatrixWorld();
this.position.project(camera);
var screenvector = new THREE.Vector3();
screenvector.copy(this.position);
oldlabelpos.push(screenvector);
var posx = Math.round((this.position.x + 1)* this.domElement.offsetWidth/2 + webglviewport.left);
var posy = Math.round((1 - this.position.y)* this.domElement.offsetHeight/2);
var boundingRect = this.box.getBoundingClientRect();
this.box.style.left = (posx - boundingRect.width) + 'px';
this.box.style.top = posy + 'px';
this.occludeLabel(this.box, this.marker);
};
//trying to change the position of the div elements with this LabelUpdateFn
LabelUpdateFn = function()
{
var labels = document.getElementsByClassName('spritelabel');
for(var k=0; k<oldlabelpos.length; k++)
{
var position = new THREE.Vector3();
position = convertlatlonToVec3(oldlabelpos[k].x, oldlabelpos[k].y).multiplyScalar(radius);
position.normalize();
camera.updateMatrixWorld();
position.project(camera);
var updateposx = Math.round((position.x + 1)* root.offsetWidth/2 + webglviewport.left);
var updateposy = Math.round((1 - position.y)* root.offsetHeight/2);
var updatedpos = {updateposx, updateposy};
newlabelpos.push(updatedpos);
}
for(var i=0; i<labels.length; i++)
{
//unable to access the properties of div element to change
labels[i].style.left = newlabelpos[i][0] + 'px';
labels[i].style.top = newlabelpos[i][1] + 'px';
}
}