appendChild 在 google 地图中不工作

Question

为什么元素A不可见？ appendChild() 函数似乎被忽略了。我只能看到 B 元素。（如果我将它推入控件，元素 A 是可见的）:(

var a = document.createElement('A');
a.style.width = '50px';
a.style.height = '50px';
a.style.cursor = 'pointer';
a.style.backgroundColor = 'rgba(10,20,30,1.0)';

var b = document.createElement('B'); 
b.style.width = '200px';
b.style.height = '200px';
b.style.backgroundColor = 'rgba(230,230,230,0.6)';

b.appendChild(a);
map.controls[google.maps.ControlPosition.LEFT].push(b);

Answer 1

您的问题是您必须在 block 级别

上显示这两个元素

var a = document.createElement('A');
a.style.width = '50px';
a.style.height = '50px';
a.style.cursor = 'pointer';
a.style.backgroundColor = 'rgba(10,20,30,1.0)';
a.style.display = 'block'; //style block level

var b = document.createElement('B'); 
b.style.width = '200px';
b.style.height = '200px';
b.style.backgroundColor = 'rgba(230,230,230,0.6)';
b.style.border = '1px solid black';
b.style.display = 'block'; //style block level

document.body.appendChild(b);
b.appendChild(a);

https://jsfiddle.net/9rnzbuqh/

Answer 2

<a>默认是行内元素，不能设置行内元素的宽高。您必须将其 display 更改为 block:

var a = document.createElement('A');
a.style.width = '50px';
a.style.height = '50px';
a.style.cursor = 'pointer';
a.style.backgroundColor = 'rgba(10,20,30,1.0)';
a.style.display = 'block';

var b = document.createElement('B'); 
b.style.width = '200px';
b.style.height = '200px';
b.style.backgroundColor = 'rgba(230,230,230,0.6)';
b.style.display = 'block';

b.appendChild(a);
map.controls[google.maps.ControlPosition.LEFT].push(b);

Answer 3

我明白我在做什么。它在没有设置显示样式的情况下工作，但我不知道为什么。

https://jsfiddle.net/9rnzbuqh/78/

var c = document.createElement('div');
c.style.height = '263px';
c.style.width = '350px';
c.style.marginLeft = '0px';
c.style.marginTop = '0px';
c.style.backgroundImage = "url(https://upload.wikimedia.org/wikipedia/en/5/5f/TomandJerryTitleCardc.jpg)";


var d = document.createElement('div');
d.style.background = 'rgba(230,230,230,0.6)';
d.style.paddingBottom = '70px';
d.style.paddingLeft = '40px';
d.style.paddingRight = '40px';
d.appendChild(c);
document.body.appendChild(d);

和

div {
  width:400px;
}

appendChild 在 google 地图中不工作

appendChild not working in google maps

javascript

appendchild