Блог

Главная - Вопросы по программированию - Поместите логотип между Картой и маркерами в Листовке

Поместите логотип между Картой и маркерами в Листовке

#javascript #html #css #leaflet #maps

Вопрос:

У меня есть веб-приложение с картой листовки на всю страницу и статическим логотипом сверху, как показано в приведенном ниже фрагменте.

При такой реализации логотип плавает над всеми элементами карты. Для реального применения было бы лучше разместить логотип между картой и маркерами на карте. Таким образом, логотип не будет скрывать маркеры при панорамировании карты.

Что я пробовал до сих пор:

  • Простое изменение z-index не работает, потому что листовка группирует плитки, маркеры и другие элементы карты в один div .
  • Я также играл с панелями и смог разместить логотип на пользовательской панели между картой и маркерами. Но таким образом, логотип больше не является статичным, когда он перемещается вместе с картой.
 var map = L.map("map");
L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", { attribution: 'amp;copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(map);
L.marker([51.5, -0.09]).addTo(map);
map.setView([51.505, -0.09], 13); 
 html, body {
  margin: 0;
}

#map {
  width: 100vw;
  height: 100vh;
}

#logo {
  padding: 20px;
  position: absolute;
  z-index: 500;
  top: 10px;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 300px;
  max-width: 50%;
  color: #255c99;
  background-color: #7ea3cc;
  border: 2px solid #255c99;
  text-align: center;
} 
 <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<link href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" rel="stylesheet"/>
<div id="map">
  <div id="logo">Logo</div>
</div>

Комментарии:

1. Ничего не поделаешь. Вы, похоже, провели много исследований по этой проблеме и уже обнаружили, что Листовка группирует все панели в одном контексте укладки — и невозможно чередовать внешний блок (т. Е. вне этого контекста укладки) между двумя блоками контекста укладки.

2. @Ивансанчез: Я уже боялся, что это невозможно. Спасибо вам за разъяснение!

Ответ №1:

Как заявил Иван Санчес в комментариях, размещение статического логотипа между картой и маркерами в Листовке невозможно.

Единственное решение, которое я мог придумать, — это разместить логотип на панели и компенсировать масштабирование и панорамирование карты с помощью JavaScript. Но я думаю, что это было бы довольно шатко.

Метки: