function test(mx,my) {
var cp = {
x: mx,
y: my
}
var obj = document.all[ "map "];
var drawObj = document.createElement( "div ");
drawObj.style.position = "absolute ";
drawObj.style.top = 0;//obj.offsetTop;
drawObj.style.left = 0;//obj.offsetLeft;
drawObj.style.width = obj.offsetWidth;
drawObj.style.height = obj.offsetHeight;
drawObj.style.backgroundColor = "transparent ";
drawObj.style.border = 0;
drawObj.innerHTML = drawRound(cp,100,200,300, "red ");//drawRound实现画3个同心圆的功能
//alert(drawObj.innerHTML);
obj.appendChild(drawObj);
}
function drawRound(centerPoint, r1, r2, r3, color) {
var sHtml = " ";
var round = {
left: 0,
top: 0,
dia: 0
};
var p = geo2screen(drawRound.container,drawRound.bound,centerPoint);
round.left = p.x - r1;
round.top = p.y - r1;
round.dia = 2*r1;
sHtml += ' <v:oval filled=false style= "position:absolute;top: ' + round.top + ';left: ' + round.left + ';width: ' + round.dia + ';height: ' + round.dia + ';z-index:7; " strokeColor= ' + color + ' /> ' + "\n ";
round.left = p.x - r2;
round.top = p.y - r2;
round.dia = 2*r2;
sHtml += ' <v:oval filled=false style= "position:absolute;top: ' + round.top + ';left: ' + round.left + ';width: ' + round.dia + ';height: ' + round.dia + ';z-index:7; " strokeColor= ' + color + ' /> ' + "\n ";
round.left = p.x - r3;
round.top = p.y - r3;
round.dia = 2*r3;
sHtml += ' <v:oval filled=false style= "position:absolute;top: ' + round.top + ';left: ' + round.left + ';width: ' + round.dia + ';height: ' + round.dia + ';z-index:7; " strokeColor= ' + color + ' /> ' + "\n ";
return sHtml;
}
function geo2screen(container,bound,coord) {
var p = {
x: 0,
y: 0
};
p.x = (coord.x - bound.getMinX())*container.width/bound.getWidth();
p.y = (bound.getMaxY() - coord.y)*container.height/bound.getHeight();
return p;
}
这样什么都不显示,如果是:
document.body.appendChild(drawObj);
则可以显示,为什么会这样?如果要将圆画在任意对象上应该怎么做?
------解决方案--------------------
全部都是function,总要有个调用才能画啊