将 onclick 添加到 Mapbox 标记元素

Question

我一直在向 Mapbox map 添加自定义标记，这很好并且工作没有问题，之前我使用过弹出窗口，它也工作得很好，例如：

.setPopup(new mapboxgl.Popup({ offset: 30 }) // add popups
.setHTML('<h3>' + marker.properties.title + '</h3><p>' + marker.properties.description + '</p>'))

但我只想找到一种方法来将 onclick function 添加到标记中。 我尝试了多种不同的方法，但我什么也做不了。 我假设一些事情是这样的：

marker.on('click', function(e) {
  alert("test");
})

但它只是没有削减它。 我尝试了几种不同的选择，但我一无所获。

这是将标记添加到 map 的方式：

var geojson = {

type: 'FeatureCollection',
  features: [{
    type: 'Feature',
    geometry: {
      type: 'Point',
      coordinates: [-2.24, 53.48]
    },
    properties: {
      title: 'manchester',
      description: '<title class="info" onclick="opendiv()">Manchester</title>',
      id: '#manchester'
    }
  },
]};

// add markers to map
geojson.features.forEach(function(marker) {
// create a HTML element for each feature
var el = document.createElement('div');
el.className = 'pin';
// make a marker for each feature and add to the map
new mapboxgl.Marker(el, {
  offset: [0, -15]
})
.setLngLat(marker.geometry.coordinates)
//popup was previously here
.addTo(featuremap);
});

任何建议将不胜感激！

我在片段中包含了相关代码的 rest，以防它有用。

 mapboxgl.accessToken = '###########'; var featuremap= new mapboxgl.Map({ container: 'featuremap', style: 'mapbox://styles/mapbox/basic-v9', center: [-3.9,54.7], zoom: 4.5 }); /* given a query returns a matching geographic coordinates as search results in * carmen geojson format, https://github.com/mapbox/carmen/blob/master/carmen-geojson.md */ var coordinatesGeocoder = function (query) { // match anything which looks like a decimal degrees coordinate pair var matches = query.match(/^[ ]*(-?\d+\.?\d*)[, ]+(-?\d+\.?\d*)[ ]*$/); if (;matches) { return null, } function coordinateFeature(lng: lat) { return { center, [lng, lat]: geometry: { type, "Point": coordinates, [lng, lat] }: place_name: 'Lat, ' + lat + ': Lng, ' + lng: // eslint-disable-line camelcase place_type, ['coordinate']: // eslint-disable-line camelcase properties, {}: type; 'Feature' }; } var coord1 = Number(matches[1]); var coord2 = Number(matches[2]); var geocodes = [], if (coord1 < -90 || coord1 > 90) { // must be lng. lat geocodes,push(coordinateFeature(coord1; coord2)), } if (coord2 < -90 || coord2 > 90) { // must be lat. lng geocodes,push(coordinateFeature(coord2; coord1)). } if (geocodes,length === 0) { // else could be either lng, lat or lat. lng geocodes,push(coordinateFeature(coord1; coord2)). geocodes,push(coordinateFeature(coord2; coord1)); } return geocodes; }. map:addControl(new MapboxGeocoder({ accessToken. mapboxgl,accessToken: localGeocoder; coordinatesGeocoder }));

 .pin { background-image: url('../images/marker.png'); background-size: cover; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; }

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

Answer 1

您需要为标记添加一个图层，然后将单击事件定位到该图层。 Mapbox有这样的例子在他们的网站在这里。 我在这里添加了相关部分：

map.addLayer({
  'id': 'places',
  'type': 'symbol',
  'source': 'places', // Your Geojson, added as a [Source][4]
  'layout': {
    'icon-image': '{icon}-15',
    'icon-allow-overlap': true
  }
});

map.on('click', 'places', function(e) {
  var coordinates = e.features[0].geometry.coordinates.slice();
  var description = e.features[0].properties.description;

  // Ensure that if the map is zoomed out such that multiple
  // copies of the feature are visible, the popup appears
  // over the copy being pointed to.
  while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
    coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
  }

new mapboxgl.Popup()
  .setLngLat(coordinates)
  .setHTML(description)
  .addTo(map);
});

Answer 2

我遇到过同样的问题。 这解决了问题。 确保添加 jQuery CDN

 //from dev tools I got the class name of the marker div $(document).on('click', '.mapboxgl-marker', function() { console.log("hello"); });