web-dev-qa-db-ja.com

mapbox-gl-jsのマーカーに「クリック」リスナーを追加する方法

次の例に従って、マップにいくつかのマーカーを追加しました。

https://www.mapbox.com/mapbox-gl-js/example/geojson-markers/

ユーザーがマーカー画像をクリックしたときにポップアップを表示したいのですが、エレガントな解決策が見つかりません。何か助けは？

mapbox-gl-js
11
Zarko

MapBox-Gl-jsの最近のリリースを検討します。マーカー付きのポップアップを追加するだけで、直接行うことができます。

// create a simple popup.
var popup = new mapboxgl.Popup({offset: 25})
    .setText('Construction on the Washington Monument began in 1848.');

// create DOM element for the marker
var el = document.createElement('div');
el.innerHTML = "Marker1";
el.id = 'marker';

// create the marker
new mapboxgl.Marker(el, {offset:[-25, -25]})
    .setLngLat(monument)
    .setPopup(popup) // sets a popup on this marker
    .addTo(map);

残りは、独自に設計したポップアップを使用できます

var html = '<div class="marker-popup">I am a custom pop-up</div>';

var customPopUp = new mapboxgl.Popup(
    {
       anchor: 'bottom',   // To show popup on top
       offset: { 'bottom': [0, -10] },  // To prevent popup from over shadowing the marker.
       closeOnClick: false   // To prevent close on mapClick.
    }
).setHTML(html); // You can set any valid HTML.

参考のために https://www.mapbox.com/mapbox-gl-js/example/set-popup/

もう1つの便利なもの、マーカーにクリック時イベントをアタッチするには、マーカー要素にクリックイベントリスナーをアタッチすることで実行できます

el.addEventListener('click', () => 
   { 
      alert("Marker Clicked.");
   }
);
8
Rahul

手始めに、おそらくマーカーをマップに追加するために使用したmap.addLayer（）関数では、構成オブジェクトで "interactive"：trueを設定する必要があります。

map.addLayer({
                "id": "YOUR LAYER ID",
                "interactive": true,
                "type": "symbol",
                "source": "YOUR LAYER SOURCE",
                "layout": {
                  "icon-image": "YOUR LAYER ICON IMAGE",
                  "text-font": "Open Sans Semibold, Arial Unicode MS Bold",
                  "text-offset": [0, 0.6],
                  "text-anchor": "top"
                },
                "Paint": {
                  "text-size": 12,
                  "icon-size": 1,
                  "icon-opacity": 0
                }
            });

その後、マップにクリックハンドラーを設定し、ポイントがフィーチャ（マーカー）の1つ上にあるかどうかを確認する必要があります。

map.on('click', function(e) {

    console.log(e);

      map.featuresAt(e.point, {radius: 100, layer: 'YOUR MARKER LAYER ID'}, function(err, features) {
            console.log(features[0]);

      });

    });

詳細は their website でドキュメントを確認できます。問題が発生した場合はお知らせください。

6
sdotson

以下のスニペットは、Mapbox-gl-jsの例からの抜粋です。 クリック時にポップアップを表示

 map.on('click', function (e) {
    var features = map.queryRenderedFeatures(e.point, { layers: ['places'] });

    if (!features.length) {
        return;
    }

    var feature = features[0];
    //Use Feature and put your code
    // Populate the popup and set its coordinates
    // based on the feature found.
    var popup = new mapboxgl.Popup()
        .setLngLat(feature.geometry.coordinates)
        .setHTML(feature.properties.description)
        .addTo(map);
});

   // Use the same approach as above to indicate that the symbols are clickable
   // by changing the cursor style to 'pointer'.

map.on('mousemove', function (e) {
    var features = map.queryRenderedFeatures(e.point, { layers: ['places'] });
    map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';
});
2
skarfa

私も同じ問題を抱えていましたが、html要素を作成せずに回避策を見つけました。

HTML要素のようにマーカーを返すgetElement()関数を使用し、クリックイベントをアタッチした後。

      this.service.getAllData().forEach(e => {
        // create MapBox Marker
        const marker = new mapboxgl.Marker().setLngLat([e.lon, e.lat]).addTo(this.map);
        // use GetElement to get HTML Element from marker and add event
        marker.getElement().addEventListener('click', () => {
          alert("Clicked");
        });
      });
1
beginner's_luck