将 onclick 添加到 Mapbox 标记元素

Question

我一直在向 Mapbox 地图添加自定义标记，这很好并且可以毫无问题地工作，之前我使用过弹出窗口，它也可以正常工作，例如：

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

但我只想找到一种方法来向标记添加 onclick 功能。我尝试了许多不同的方法，但我无法得到任何工作。 我假设以下内容：

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

但它只是没有削减它。我已经尝试了几个不同的选项，但我还是空白。

这是向地图添加标记的方式：

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

任何建议将不胜感激！

我已将其余相关代码包含在 sn-ps 中，以备不时之需。

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

您将需要add a layer 作为标记，然后将click event 定位到该层。 Mapbox 在他们的网站here 上有一个这样的例子。我在这里添加了相关部分：

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