Поместите кнопку поверх карты Google
-
21-08-2019 - |
Вопрос
Я хотел бы поместить кнопку поверх карты Google рядом с кнопками Map, Satelite и Hybrid.
Мне было интересно, возможно ли это и как лучше всего это сделать?
Итак, у меня есть идея наложить поверх карты Google изображение, на которое можно кликнуть, но я не уверен, что это удалит все события с карты Google.
У вас есть какие-нибудь идеи о том, как это можно было бы сделать?
Решение
Существует довольно хорошее описание того, как это сделать здесь.
Я почти уверен, что вы можете оформить эти кнопки так, чтобы они выглядели как стандартные кнопки, и вы определенно можете закрепить их в правом верхнем углу.Когда у меня будет возможность, я попробую и сообщу о своих результатах.
Обновить:
У меня была возможность опробовать это, и это работает нормально:
По сути, вы в конечном итоге делаете очень похожие вещи, реализуя кнопки с помощью GControl или просто используя абсолютное позиционирование DIV над картой (как Крисб предложено).Так что я не думаю, что существует правильный (или более простой) подход, это просто вопрос личных предпочтений.Удачи.
Другие советы
Принятый ответ датирован 2009 годом (5-летней давности) и содержит ссылки на устаревшую версию Google Maps API.
При поиске того же самого вопроса я нашел этот пример: https://developers.google.com/maps/documentation/javascript/examples/control-custom
// Create the DIV to hold the control and
// call the HomeControl() constructor passing
// in this DIV.
var homeControlDiv = document.createElement('div');
var homeControl = new HomeControl(homeControlDiv, map);
homeControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
Просто в дополнение к ответу Cannonade, вот html / css, который использует элемент управления Google Map.Вы можете скопировать css, чтобы он выглядел точно так же, как настоящий.
Вы могли бы создать формальный GControl или просто разместить их поверх карты Google с абсолютным позиционированием.
Активная кнопка:
<div style="border: 1px solid black; position: absolute; background-color: white; text-align: center; width: 5em; cursor: pointer; right: 15.3em;" title="Show street map">
<div style="border-style: solid; border-color: rgb(52, 86, 132) rgb(108, 157, 223) rgb(108, 157, 223) rgb(52, 86, 132); border-width: 1px; font-size: 12px; font-weight: bold;">
Map
</div>
</div>
Неактивная кнопка:
<div style="border: 1px solid black; position: absolute; background-color: white; text-align: center; width: 5em; cursor: pointer; right: 5.1em;" title="Show imagery with street names">
<div style="border-style: solid; border-color: white rgb(176, 176, 176) rgb(176, 176, 176) white; border-width: 1px; font-size: 12px;">
Hybrid
</div>
</div>
Обновить: В библиотеке утилит Google Maps также есть расширение, которое может выполнить эту задачу - ExtMapTypeControl ( ExtMapTypeControl )
У меня тоже была такая же проблема, вот как я это сделал, создайте кнопку и придайте ей приведенный ниже стиль
id="my_button"
#my_button{
position:absolute;
bottom:2%;
color: #fff;
background-color: #4d90fe;
padding: 11px;
border: 1px solid transparent;
border-radius: 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
alignment-baseline:central;
width:90%;
left:5%;
text-align:center;
text-decoration:none;
margin:0px auto;}
#my_button:hover{
background-color:#3B6EC2;}
используя jQuery, это выглядит примерно так:сначала создайте функцию, которая вернет ваш элемент
function myButton(){
var btn = $('<div class="my-button"></div>');
btn.bind('click', function(){
// logic here...
alert('button clicked!');
});
return btn[0];
}
и после того, как карта была создана, вам нужно прикрепить к ней свою кнопку:
map.controls[google.maps.ControlPosition.TOP_CENTER].push(myButton());