将拖动事件从 div 传递到 mapbox 层

Question

这是一个 jsfiddle https://jsfiddle.net/jes4fggd/。我想移动地图，但随着 div 跟随鼠标指针，事件似乎被 div 捕获。当鼠标悬停在 div 或按钮上时，我想将此事件传递给地图。我只想单击事件可用于按钮，但拖动用于地图。我尝试使用 voteDiv1.style['pointer-events'] = 'none';但这对我来说有点棘手。有什么简单的方法吗？谢谢

var voteDiv1 = document.getElementById('vote1');
map.on('mousemove', function (e) {
    var c = map.project(e.lngLat);
    console.log(c)
    voteDiv1.style.left = (c.x) -50 + 'px';
    voteDiv1.style.top = (c.y) -50 + 'px';
});

还有另一个例子https://jsfiddle.net/q3ghvuu3/ - 如何以这种方式移动地图或点击按钮？

Answer 1

根据描述对您的目的感到困惑，但这是我的最佳猜测：

单击地图应按预期拖动地图
点击按钮应该按预期点击按钮
在地图上移动光标应该在地图上移动按钮
点击并拖动按钮应该拖动地图（大多数用户不希望）

我会重申我最初的担忧，即 UI 是个坏主意。用户很熟悉在地图上看到按钮，例如 Google 地图上的缩放按钮，并且知道要拖动地图，他们可以在任何地方单击但按钮。所以我仍然建议不要这样做。但它就在这里。

为了完成它，我们将 pointer-events: none 添加到按钮元素。这样所有的点击和拖动都会进入地图。然后我们检查点击的位置，看看它是否发生在与按钮相同的位置，如果是，则向按钮发送一个 click 事件。

mapboxgl.accessToken = 'pk.eyJ1IjoiYmVuZGVybGlvIiwiYSI6ImNqM29qdXR5djAwMTQzM214M2hnZWVycWsifQ.jtDIyytOGMJ0TS9Pp6zFVg';
var map = new mapboxgl.Map({
  container: 'map', // container id
  style: 'mapbox://styles/mapbox/streets-v9', // stylesheet location
  center: [-74.50, 40],
  zoom: 9 // starting zoom
});

var voteDiv1 = document.getElementById('vote1');
map.on('mousemove', function(e) {
  var c = map.project(e.lngLat);
  voteDiv1.style.left = (c.x) - 50 + 'px';
  voteDiv1.style.top = (c.y) - 50 + 'px';
});

document.getElementById("plus").addEventListener("click", function() {
  alert("Plus clicked")
})

document.getElementById("map").addEventListener("click", function(event) {
  var button = document.getElementById("plus");
  var buttonBB = button.getBoundingClientRect();

  if (
    event.pageX > buttonBB.left &&
    event.pageX < buttonBB.right &&
    event.pageY > buttonBB.top &&
    event.pageY < buttonBB.bottom
  ) {
    var bottomEvent = new Event("click");
    bottomEvent.pageX = event.pageX;
    bottomEvent.pageY = event.pageY;

    button.dispatchEvent(bottomEvent);
  }
  
  
})

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

#vote1 {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0px;
  left: 0px;
  margin: 0px;
  padding: 0px;
  border: 2px solid red;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.css" rel="stylesheet" />
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.js"></script>

<div id='map'></div>

<div id="vote1">
  <div id="box" sectionId="" style="border:1px solid blue;">
    <button id="plus" style="width:150px; height:150px">+</button>
  </div>
</div>

将拖动事件从 div 传递到 mapbox 层

Pass drag event from div to mapbox layer

html

javascript

css

mapbox

mapbox-gl-js