Я создал два пользовательских элемента управления в Google Maps на основе существующих примеров по умолчанию. Они работают хорошо, но я понял, что они отображаются вертикально :
Но я хочу, чтобы они отображались горизонтально :
Определения 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 = ƈpx solid #fff'
controlUI.style.borderRadius = Ɖpx'
controlUI.style.boxShadow = Ɔ 2px 6px rgba(0,0,0,.3)'
controlUI.style.cursor = 'pointer'
controlUI.style.marginBottom = Ǝpx'
controlUI.style.marginRight = ཆpx'
controlUI.style.paddingTop = Ɖpx'
controlUI.style.paddingLeft = Ɖpx'
controlUI.style.paddingRight = Ɖpx'
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 вокруг обоих настраиваемых элементов управления, но у него нет идентификатора, поэтому я не могу его получить или изменить.
У кого-нибудь есть идея, как я могу установить / отобразить эти два настраиваемых элемента управления вертикально?
Всего 1 ответ
Данг, просто нашел ответ сам. Мне пришлось добавить эти стили CSS в оба элемента управления:
controlUI.style.cssFloat = 'left';
Теперь элементы управления отображаются горизонтально (рядом друг с другом).