如何在mapbox-gl-js中的标记上添加"click"侦听器

Question

我使用以下示例在地图上添加了一些标记：

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

现在我想在用户点击标记图像时显示弹出窗口，但我找不到优雅的解决方案。有什么帮助吗？

Answer 1

我也遇到了同样的问题，但我找到了一个不必创建html元素的解决方法。

我使用了getElement()函数，它像HTML元素一样返回Marker，并在我附加单击事件之后。

      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");
        });
      });

Answer 2

考虑到最近发布的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/

还有一个有用的东西，要将点击事件附加到标记上，可以通过在标记元素上附加点击事件侦听器来完成，如

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

Answer 3

以下片段来自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' : '';
});

Answer 4

对于初学者来说，在您可能用来将标记添加到映射的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
                }
            });

之后，您需要在地图上设置一个点击处理程序，并检查该点是否在您的某个功能(标记(上。

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]);
      });
    });

您可以在他们的网站上查看文档以了解更多信息。如果你有任何问题，请告诉我。

Answer 5

<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css" rel="stylesheet" />
<style>
  html, body, #mapContainer {
    height: 100%;
    margin: 0;
  }
  /* Change the cursor to a pointer on hover so the user knows it's clickable */
  .mapboxgl-marker:hover {
    cursor: pointer;
  }
  /* darken the marker on hover */
  .mapboxgl-marker:hover svg > g > g:nth-child(2) {
    fill: #7993a5;
  }
  #info-box {
    position: absolute;
    z-index: 10;
    left: 7px;
    font-family: sans-serif;
    background: #dedede;
    padding: 12px;
    border-radius: 8px;
    font-size: 2rem;
    border: 1px solid #969696;
    bottom: 34px;
  }
</style>

<div id="mapContainer"></div>
<div id="info-box">Click a City</div>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js'></script>
<script>
mapboxgl.accessToken = 'YOUR MAPBOX TOKEN';
const map = new mapboxgl.Map({
  container: 'mapContainer',
  style: 'mapbox://styles/mapbox/light-v9',
  center: [-100.52, 37.67],
  zoom: 3.05,
  pitch: 36,
  hash: true,
});
// Add zoom and rotation controls to the map.
map.addControl(new mapboxgl.NavigationControl());
// extend mapboxGL Marker so we can pass in an onClick handler
class ClickableMarker extends mapboxgl.Marker {
  // new method onClick, sets _handleClick to a function you pass in
  onClick(handleClick) {
    this._handleClick = handleClick;
    return this;
  }
  // the existing _onMapClick was there to trigger a popup
  // but we are hijacking it to run a function we define
  _onMapClick(e) {
    const targetElement = e.originalEvent.target;
    const element = this._element;
    if (this._handleClick && (targetElement === element || element.contains((targetElement)))) {
      this._handleClick();
    }
  }
};
const cities = [
  {
    name: 'New York',
    coordinates: [ -73.969145, 40.669116 ],
  },
  {
    name: 'Washington, D.C.',
    coordinates: [ -77.047119, 38.856820 ],
  },
  {
    name: 'Chicago',
    coordinates: [ -87.662659, 41.865470 ],
  },
  {
    name: 'Seattle',
    coordinates: [ -122.266846, 47.591346 ],
  },
  {
    name: 'St. Louis',
    coordinates: [ -90.304871, 38.634036 ],
  },
  {
    name: 'Houston',
    coordinates: [ -95.377808, 29.754840 ],
  },
];
cities.forEach((city) => {
  new ClickableMarker()
    .setLngLat(city.coordinates)
    .onClick(() => { // onClick() is a thing now!
      document.getElementById('info-box')
        .innerHTML = `You clicked ${city.name}!`;
    })
    .addTo(map);
});
</script>

https://bl.ocks.org/chriswhong/8977c0d4e869e9eaf06b4e9fda80f3ab

这是解决这个问题的办法。

单独添加点击事件

希望这能帮助