Question

我已基于现有默认示例在Google Maps中创建了两个自定义controlUI。它们效果很好，但我意识到它们会垂直显示：

但是我希望它们水平显示：

两个自定义控件的CSS定义看起来都一样（当然，除了图像）：

// Add marker control
var optionDiv = document.createElement('div');

// Same for second control UI (centerPlayer) but for simplicity reasons not added
var CenterMarker = new centerMarkerButton (optionDiv, this.map);

    optionDiv.index = 1;
this.map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(optionDiv);

...

function centerMarkerButton (controlDiv, map) {

        // Set CSS for the control border.
        var controlUI = document.createElement('div');
        controlUI.style.backgroundColor = '#fff';
        controlUI.style.border = '2px solid #fff';
        controlUI.style.borderRadius = '3px';
        controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
        controlUI.style.cursor = 'pointer';
        controlUI.style.marginBottom = '8px';
        controlUI.style.marginRight = '10px';
        controlUI.style.paddingTop = '3px';
        controlUI.style.paddingLeft = '3px';
        controlUI.style.paddingRight = '3px';
        controlDiv.appendChild(controlUI);

        // Set CSS for the control interior.
        var controlText = document.createElement('div');
        controlText.innerHTML = '<a><img src="https://www....centermarker.svg" height="28px" width="28px"</a>';
        controlUI.appendChild(controlText);

        // Add click event listener
        controlUI.addEventListener('click', function() {
            instance.centerGame();
        });
    }
}

        // Set CSS for the control border.
        var controlUI = document.createElement('div');
        controlUI.style.backgroundColor = '#fff';
        controlUI.style.border = '2px solid #fff';
        controlUI.style.borderRadius = '3px';
        controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
        controlUI.style.cursor = 'pointer';
        controlUI.style.marginBottom = '8px';
        controlUI.style.marginRight = '10px';
        controlUI.style.paddingTop = '3px';
        controlUI.style.paddingLeft = '3px';
        controlUI.style.paddingRight = '3px';
        controlUI.style.paddingRight = '3px';
        controlDiv.appendChild(controlUI);

        // Set CSS for the control interior.
        var controlText = document.createElement('div');
        controlText.innerHTML = '<a><img src="https://www..../centeruser.svg" height="28px" width="28px"</a>';
        controlUI.appendChild(controlText);

在浏览器中显示的Google地图中的代码分析表明，两个自定义控件之间都有一个简单的DIV，但是它没有ID，所以我无法访问/修改它。

任何人都知道我如何垂直设置/显示这两个自定义控件？

Answer 1

Dang，我自己找到了答案。我必须将这些CSS样式添加到两个controlUI中：

controlUI.style.cssFloat = 'left';

现在，这些控件水平显示（彼此相邻）。

如何在Google Maps V3中放置自定义controlUI？

1 个答案: