javascript - 鼠标滚动不适用于 Google map 上附加的 div

Question

我在 Google map 的中心添加了一个固定标记:

div 的 css:

.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添加到 map 的脚本:

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

这会导致滚动(用于缩放)不适用于附加的 div(但适用于 map 的其他部分)。如何让滚动事件通过div到达 map ？

编辑:我需要这个 div 可以点击。所以我不应该禁用这个 div 上的所有事件。

Answer 1

我真的不明白您为什么需要它，而且您还没有提供完整的代码和用例。

您可以做的是:按照我的建议使用标准标记，然后在 dragstart 上隐藏标记并显示您的自定义绝对元素。在 dragend 上隐藏元素，重新定位标记并再次显示它。这样您就可以保留 native 标记行为，并且在拖动时不会看到延迟。

如果您想按照您的问题建议使用滚轮缩放，那么您将遇到问题。滚轮缩放将 map 缩放到鼠标光标所在的位置(而不是朝向 map 中心)，这意味着缩放后，您的标记将不再位于中心。所以在这种情况下，您需要在缩放后重新居中 map 。我使用了以下内容:

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

如果你不这样做，那么你的绝对定位标记将不再位于你真正的标记所在的位置......

这是一个有效的代码片段。请注意，如果使用信息窗口，您还会遇到一些问题。如果标记距离 Canvas 边缘太近，Infowindows 可能会导致 map 重新定位(例如，如果您将 map 高度设置为 150px...，就会发生这种情况)。您可能还需要在拖动 map 时将其隐藏，否则它会停留在同一位置。

换句话说，在拖动 map 和重新定位标记时，这听起来像是“只是”看不到一点延迟的很多 hack... 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>