Сделать маркер всплывающим

Question

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

Я нашел этот пример

Пример наведения

Но там маркеры получают из слоя

У меня есть данные маркеров в JSON.Вот как я делаю это, показывая

  export  module  HotelMapResults {
  const token = "***************";
   export function all_hotels_map_results(): void {
    Helpers.set_currency_settings();
    const json = gon.hotel_info;
    const centerLatlng = new mapboxgl.LngLat(gon.destination_city.lng, gon.destination_city.lat);
    mapboxgl.accessToken = token;
    let map = new mapboxgl.Map({
          container: "map-canvas-all",
          style: "mapbox://styles/mapbox/streets-v9",
          center: centerLatlng,
          zoom: 9
    });

    map.addControl(new mapboxgl.NavigationControl());
    map.on("load", function() {
    $.each(json, function(i, item) {
      let myLatlng = new mapboxgl.LngLat(item.lng, item.lat);
      let stars = "";
      for(let s = 0; s < item.rating; s++) {
        stars += '<img class="star-image" style="height:20px;width:20px;">';
        }
      const Popup_Content = '<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">'+stars +'</div>'
      + '<div class ="map-card__price-container">'+__("Flygbolag")+ ": "+ accounting.formatMoney(item.sales_prices[0])
      +'</div>'
      + '</div>';

      let marker = new mapboxgl.Marker()
        .setLngLat(myLatlng)
        .setPopup(new mapboxgl.Popup({ offset: 5 })
        .setHTML(Popup_Content))
        .addTo(map);
      });
    });

Я пытался, например, показать предупреждение на mouseenter, как это

map.on("mouseenter","marker", function(){
  alert("Here");
})

Вот мой json

 [
  {
    "name": "Ibis London Thurrock M25",
    "address1": "Weston Avenue",
    "rating": 2,
    "description": "Ibis London Thurrock hotel is an economy London hotel located 15 minutes' drive from Ebbsfleet International Station.",
    "lng": 0.268539,
    "lat": 51.477455,
    "pictures": [
      {
        "url": "https://aobtravel.s3.amazonaws.com/hotelpictures/006/866/211/LON-IBI9-1.jpg?1413518521",
        "description": "Exteriör"
      },
      {
        "url": "https://aobtravel.s3.amazonaws.com/hotelpictures/006/866/221/LON-IBI9-2.jpg?1413518521",
        "description": "Exteriör"
      },
      {
        "url": "https://aobtravel.s3.amazonaws.com/hotelpictures/006/866/231/LON-IBI9-3.jpg?1413518522",
        "description": "Exteriör"
      },
      {
        "url": "https://aobtravel.s3.amazonaws.com/hotelpictures/006/866/241/LON-IBI9-4.jpg?1413518522",
        "description": "Exteriör"
      },
      {
        "url": "https://aobtravel.s3.amazonaws.com/hotelpictures/006/866/253/LON-IBI9-5.jpg?1413518522",
        "description": "Gästrum"
      },
      {
        "url": "https://aobtravel.s3.amazonaws.com/hotelpictures/006/866/261/LON-IBI9-6.jpg?1413518523",
        "description": "Gästrum"
      },
      {
        "url": "https://aobtravel.s3.amazonaws.com/hotelpictures/006/866/269/LON-IBI9-7.jpg?1413518523",
        "description": "Restaurang"
      },
      {
        "url": "https://aobtravel.s3.amazonaws.com/hotelpictures/006/866/275/LON-IBI9-8.jpg?1413518523",
        "description": "Restaurang"
      },
      {
        "url": "https://aobtravel.s3.amazonaws.com/hotelpictures/006/866/283/LON-IBI9-9.jpg?1413518523",
        "description": "Lobby"
      },
      {
        "url": "https://aobtravel.s3.amazonaws.com/hotelpictures/006/866/291/LON-IBI9-10.jpg?1413518524",
        "description": "Lobby"
      },
      {
        "url": "https://aobtravel.s3.amazonaws.com/hotelpictures/007/050/709/LON-IBI9-11.jpg?1485170823",
        "description": "Annat"
      },
      {
        "url": "https://aobtravel.s3.amazonaws.com/hotelpictures/007/050/712/LON-IBI9-12.jpg?1485170823",
        "description": "Annat"
      },
      {
        "url": "https://aobtravel.s3.amazonaws.com/hotelpictures/007/050/715/LON-IBI9-13.jpg?1485170823",
        "description": "Annat"
      },
      {
        "url": "https://aobtravel.s3.amazonaws.com/hotelpictures/007/050/720/LON-IBI9-14.jpg?1485170823",
        "description": "Annat"
      }
    ],
    "sales_prices": [
      4788,
      4788,
      5964,
      5964
    ]
  }

]

Ноэто не работает.Как я могу сделать всплывающие подсказки в моем случае?

Answer 1

Не прямое решение, но вы можете захотеть взглянуть на https://github.com/mapbox/mapbox-gl-markers, который забирает большую часть кода, чтобы автоматически предоставлять простые маркеры карты с всплывающими окнами из размеченного GeoJSON.

Answer 2

Это можно сделать, привязав событие к элементу HTML маркера.

Это будет выглядеть так:

var marker = document.createElement("img")
marker.src = "/images/marker-icon.png"
marker.height = 35

marker.addEventListener("mouseenter", ()=>{
  // Add popup here
})

marker.addEventListener("mouseleave", ()=>{
  // Remove popup here
})
var mapBoxMarker = new mapboxgl.Marker(marker)