0

Есть такой код (по непонятным причинам сниппет его не запускает)

function initMap() {
  const point = {lat: 49.985, lng: 36.23};
  const map = new google.maps.Map(document.getElementById('map'), {
    zoom: 14,
    center: point
  });
  
  const markers = [];
  const points = [point, point, point];
  for (let i = 0; i < points.length; i++) {
    const marker = new google.maps.Marker({
      position: points[i]
    });
    markers.push(marker);
  };
  
  const markerCluster = new MarkerClusterer(map, markers, {
    imagePath: 'https://github.com/googlemaps/js-marker-clusterer/raw/gh-pages/images/m'
  });

  const res = new google.maps.Marker({
    map: map,
    position: point,
    icon: {
      path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
      fillColor: "green",
      fillOpacity: 1,
      scale: 7,
      strokeWeight: 1,
    },
    zIndex: 100
  });
}
#map {
  height: 400px;
  width: 400px;
  background-color: grey;
}
<script src="https://github.com/googlemaps/js-marker-clusterer/raw/gh-pages/src/markerclusterer.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
<div id="map"></div>

В нем в одну точку выводится три маркера, причем первые два кластеризируются при помощи библиотеки js-marker-clusterer.

Проблема: я хочу некластеризированный маркер вывести поверх кластера. Для этого указываю ему zIndex: 100. Но он все равно выводит под кластером. Как его поднять наверх?

введите сюда описание изображения

P.S. Если кто-то знает как заставить работать сниппет - подредактируйте сообщение

3

1 ответ 1

0

Как подсказали на enSO, проблема кроется в том, что объекты выводятся в разные слои.

На карте, по умолчанию, присутствуют пять слоев

  1. mapPane — вывод тайлов карты
  2. overlayLayer — отображение ломаных, полигонов, каких либо дополнительных тайлов поверхности
  3. markerLayer — отображение маркеров
  4. overlayMouseTarget — слой, который получает события DOM
  5. floatPane — отображение всяких информационных окон

Все слои располагаются друг над другом. маркера выводятся на 3 слой, а кластеры на четвертый. Поэтому они всегда будут располагаться над маркерами.

Решение проблемы - создать свой слой, который будет выше чем overlayMouseTarget и добавлять маркеры в него

Как разберусь, как добавлять маркеры на новый слой — дополню ответ

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.