Добавить onclick к элементу маркера Mapbox - PullRequest
Новая
       73

Добавить onclick к элементу маркера Mapbox

0 голосов
/ 06 февраля 2020

Я добавляю пользовательские маркеры на карту 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);
});

Любой совет будет высоко ценится!

Я включил оставшуюся часть кода в фрагменты, на случай, если это будет полезно. 

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' />

...

1 Ответ

0 голосов
/ 25 февраля 2020

Вы захотите добавить слой для маркеров и затем нацелить событие click на этот слой. 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);
});
...