Mouse scroll not working on appended div on Google map

问题

I have added a fixed marker in center of Google map:

css for 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;
}

Script to add div to the map:

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

This causes the scroll (for zoom) not working on the appended div (but works on other parts of map). How can I make the scroll event pass through the div and reach the map?

Edit: I need this div to be clickable. So I should not disable all events on this div.

回答1:

I don't really see why you would need that and you haven't yet provided the full code and use case.

What you could do is: use a standard Marker as I suggested, then on dragstart hide the marker and display your custom absolute element. On dragend hide the element, reposition the Marker and display it again. This way you keep the native Marker behavior and won't see the lag when dragging.

If you want to use scroll wheel zoom as your question suggests, then you will have an issue. Scroll wheel zoom zooms the map onto where your mouse cursor is (not towards the map center), which means that after zooming, your marker won't be in the center anymore. So in that case, you would need to re-center the map after zooming. I used the following:

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

If you don't, then your absolute positioned marker won't be anymore where your real Marker is...

Here is a working code snippet. Note that you will also face some issues if using an Infowindow. Infowindows can cause the map to re-position if the marker is too close from the canvas edge (that would happen here if for example you set the map height to 150px...). You would also probably need to hide it when dragging the map, otherwise it'll stay at the same position.

In other words, that sounds like a lot of hacks for "just" not seeing a bit of lag when dragging the map and repositioning the Marker... 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>

回答2:

As Google Maps iframes are scrolling only works when ctrl is pressed, you can use JQuery events to make centerMarker event-insensitive when ctrlis pressed, like this :

$("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 />

The issue right now is that when you have clicked on the iframe, you get focus on it and the keydown event doesn't fire anymore, you must click outside of it to make it work again.

来源：https://stackoverflow.com/questions/55981479/mouse-scroll-not-working-on-appended-div-on-google-map