divからマップボックスレイヤーにドラッグイベントを渡す

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をbutton要素に追加します。そうすることで、すべてのクリックとドラッグが地図に表示されます。次に、ボタンの位置を確認してボタンと同じ場所にあるかどうかを確認し、そうであれば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>