Всплывающее окно Mapbox не работает - PullRequest
Новая
       9

Всплывающее окно Mapbox не работает

0 голосов
/ 03 июля 2018

У меня есть скрипт для отображения маркеров на карте

Вот код этого

https://codepen.io/suhomlineugene/pen/mKoaxb

Мне нужно показать всплывающее окно при наведении на маркер

Я пытался сделать это, например, так, чтобы он работал в отеле Ibis London Barking.

Но это не работает 

map.on('mouseover', 'Ibis London Barking', function(e) {
      alert("Hover");
    });

Официальные документы говорят, что мне нужен такой код 

 map.on('mouseenter', 'places', function(e) {******}):

Но они добавляют маркеры от addLayer(), а я нет. Как решить эту проблему?

Ответы [ 2 ]

0 голосов
/ 03 июля 2018

Возможное решение состоит в том, чтобы добавить этот необходимый слой .. как этот

Я немного изменил ваш код, чтобы сгенерировать похожий объект слоя, как показано в примере из документов 

map.on("load", function() {

const starImage = '<img class="star-image" style="height:20px;width:20px;">';

const layer = {
  "id": "places",
  "type": "symbol",
  "layout": {
    "icon-image": "{icon}-15",
    "icon-allow-overlap": true
  },
  "source": {
    "type": "geojson",
    "data": {
      "type": "FeatureCollection",
      "features": json.map(function(item){
        return {
          "type": "Feature",
          "properties": {
            "description": `<div class="map-card__wrapper">
                              <div class="map-card__image-container">
                              <div class="map-card__image" style="background: url(${item.pictures[0].url});"></div>
                            </div>
                            <div class ="map-card__content-container ">
                              <div class ="map-card__title">${item.name}</div>
                                <p class="map-card__address">${item.address1}</p>
                                <div class ="map-card__review">${starImage.repeat(item.rating)}</div>
                              </div>
                            </div>`,
            "icon": "star" //probably want to change
          },
          "geometry": {
            "type": "Point",
            "coordinates": [item.lng, item.lat]
          }
        }
      })
    }
  }
};

map.addLayer(layer);

var popup = new mapboxgl.Popup({
  closeButton: false,
  closeOnClick: false,
  offset: 5
});

map.on('mouseenter', 'places', function(e) {
  console.log(e)
  // Change the cursor style as a UI indicator.
  map.getCanvas().style.cursor = 'pointer';

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

  // Populate the popup and set its coordinates
  // based on the feature found.
  popup.setLngLat(coordinates)
    .setHTML(description)
    .addTo(map);
});

map.on('mouseleave', 'places', function() {
  map.getCanvas().style.cursor = '';
  popup.remove();
});
});
0 голосов
/ 03 июля 2018

Попробуйте это: 

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

  // Create a popup
  var popup = new mapboxgl.Popup({
    closeButton: false,
    closeOnClick: false
  });

  function showPopup(e) {
    // Change the cursor
    map.getCanvas().style.cursor = 'pointer';

    // Show the popup
    popup.setLngLat(e.features[0].geometry.coordinates)
      .setHTML(checkEmpty(e.features[0].properties.name))
      .addTo(map);
  }

  function hidePopup() {
    map.getCanvas().style.cursor = '';
    popup.remove();
  }

  function checkEmpty(info) {
    return (info) ? info : "No data";
  }

   map.on('mouseenter', 'places', showPopup);
   map.on('mouseleave', 'places', hidePopup);
});
...