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

我尝试过像在这样的鼠标中显示警告

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)

制作标记弹出窗口

2 个答案: