Question

MapBox html 标记

2020-08-11

132

reactjs mapbox-gl-js

我有一个 html 标记，我想在里面有一个按钮来删除此标记

const PoiHtml = (poi: PointOfInterest) =>
        `<h3>${poi.name}</h3>
        <button>delete</button>`

const source = map.getSource(`marker-${poi.id}`) as any;
source.setData({
            'type': 'FeatureCollection',
            'features': [
                {
                    'type': 'Feature',
                    'properties': {
                        'description': PoiHtml(poi),
                        'icon': 'theatre'
                    }
                }
            ]
        });

如何获取点击删除按钮的事件？

Answer 1

有多种方法可以实现这一点，但最简单的方法可能是使用 HTML onclick 事件。您只需要修改 PoiHtml 的字符串，添加一个 onclick 属性，并将其设置为事件处理程序的值即可。

我已经创建了一个关于如何向标记弹出窗口添加事件的快速小提琴。每次点击按钮时，控制台都会通过事件记录 “deleted”

以下是相关代码：

    mapboxgl.accessToken = 'PUT HERE YOUR TOKEN';
    var map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [-73.99594, 40.680975],
      zoom: 17
    });


    map.on('style.load', function() {

      map.on('click', function(e) {
        let l = map.getStyle().layers;

        var features = map.queryRenderedFeatures(e.point, {
          layers: ['poi-label', 'transit-label', 'landuse', 'national-park']
        });

        let marker = new mapboxgl.Marker({
            draggable: true
          })
          .setLngLat(e.lngLat)
          .setPopup(new mapboxgl.Popup({
              offset: 25
            }) // add popups
            .setHTML('<h3>Actions</h3><i class="fas fa-plus-circle"></i>&nbsp;<button type="button" class="btnDelete" onclick="clicked()" >delete</button>'));
        marker.addTo(map);
        marker.togglePopup();
      });

    });

    function clicked() {
      console.log("deleted");
    }