Прокрутка мыши не работает на добавленном div на карте Google

Question

Я добавил фиксированный маркер в центре карты Google:

css для div:

.centerMarker{
   width:30px;
   height:60px;
   margin:auto;
   position:absolute;
   top:50%;
   left:50%;
   z-index:2;
   background:url('fixedMarker.png') no-repeat center;
   background-size:30px 60px;
   margin-top:-60px;
   margin-left:-15px;
}

Скрипт для добавления div на карту:

$('<div/>').addClass('centerMarker').appendTo(map.getDiv())

Это приводит к тому, что прокрутка (для увеличения) не работает на добавленном div (но работает на других частях карты).Как сделать так, чтобы событие прокрутки проходило через div и доходило до карты?

Редактировать: Мне нужно, чтобы этот div был кликабельным.Поэтому я не должен отключать все события в этом div.

Answer 1

Я действительно не понимаю, зачем вам это нужно, и вы еще не предоставили полный код и вариант использования.

То, что вы могли бы сделать, это: использовать стандартный маркер, как я предлагал, затем на dragstart скрыть маркер и отобразить ваш собственный абсолютный элемент.На dragend скрыть элемент, переместить маркер и отобразить его снова.Таким образом, вы сохраняете нативное поведение маркера и не видите задержки при перетаскивании.

Если вы хотите использовать масштабирование с колесом прокрутки, как подсказывает ваш вопрос, то у вас возникнет проблема.Масштаб колеса прокрутки увеличивает масштаб карты на месте, где находится курсор мыши (не к центру карты), что означает, что после масштабирования ваш маркер больше не будет в центре.Так что в этом случае вам нужно будет перецентрировать карту после масштабирования.Я использовал следующее:

google.maps.event.addListener(map, 'idle', function() {
  map.setCenter(marker.getPosition());
});

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

Вот фрагмент рабочего кода,Обратите внимание, что вы также столкнетесь с некоторыми проблемами при использовании Infowindow.Информационные окна могут вызвать перемещение карты, если маркер находится слишком близко от края холста (это может произойти, если, например, вы установите высоту карты в 150 пикселей ...).Вам также, вероятно, придется скрывать ее при перетаскивании карты, в противном случае она останется на том же месте.

Другими словами, это звучит как много хаков за то, что «просто» не видят небольшую задержкупри перетаскивании карты и изменении положения маркера ... IMO

function initialize() {

  var mapOptions = {
    zoom: 14,
    center: new google.maps.LatLng(52.5498783, 13.425209099999961),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    scrollwheel: true
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  let image = {
    url: 'https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi2_hdpi.png',
    size: new google.maps.Size(54, 86),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(27, 86),
  };

  let marker = new google.maps.Marker({
    map: map,
    position: map.getCenter(),
    icon: image
  });

  let infowindow = new google.maps.InfoWindow({
    content: 'Hello from Marker'
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map, marker);
  });

  $('<div/>').addClass('centerMarker').appendTo(map.getDiv());

  google.maps.event.addListener(map, 'idle', function() {
    map.setCenter(marker.getPosition());
  });

  google.maps.event.addListener(map, 'dragstart', function() {

    infowindow.close();
    marker.setVisible(false);
    $('.centerMarker').show();
  });

  google.maps.event.addListener(map, 'dragend', function() {

    marker.setPosition(map.getCenter());
    marker.setVisible(true);
    $('.centerMarker').hide();
  });
}

#map-canvas {
  height: 400px;
}

#map-canvas .centerMarker {
  position: absolute;
  background: url(https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi2_hdpi.png) no-repeat;
  top: 50%;
  left: 50%;
  z-index: 1;
  margin-left: -27px;
  margin-top: -86px;
  height: 86px;
  width: 54px;
  cursor: pointer;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map-canvas"></div>

<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initialize">
</script>

Answer 2

Поскольку прокрутка в Картах Google работает только при нажатии ctrl, вы можете использовать события JQuery, чтобы сделать centerMarker нечувствительным к событиям при нажатии ctrl, например так:

$("window").keydown((e) => {
  if (e.keyCode == 17) {
    $(".centerMarker").css("pointer-events", "none");
  }
});

$("window").keyup((e) => {
  if (e.keyCode == 17) {
    $(".centerMarker").css("pointer-events", "all");
  }
});

#parent {
  position: relative;
}

.centerMarker {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent"><iframe width="700" height="440" src="https://maps.google.com/maps?width=700&amp;height=440&amp;hl=en&amp;q=Paris%2C%20France+(Titre)&amp;ie=UTF8&amp;t=&amp;z=10&amp;iwloc=B&amp;output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
  <div class="centerMarker">
    test
  </div>
</div><br />

Проблема сейчас заключается в том, что когда вы щелкаете по фрейму, вы получаете фокус на нем, и событие keydown больше не срабатывает, вы должны щелкнуть за его пределами.чтобы заставить его работать снова.