Как программно закрыть контекстное меню HERE Maps?

У меня есть карта HERE Maps, отображаемая на простой веб-странице с раскрывающимся списком и парой кнопок. Я использую событие contextmenu для отображения контекстного меню при щелчке правой кнопкой мыши, например:

var map = new H.Map(
    document.getElementById('mapContainer'),
    maptypes.raster.normal.map,
    {
        zoom: 12,
        center: { lat: -33.81, lng: 150.78 },
        pixelRatio: window.devicePixelRatio || 1,
        engineType: H.map.render.RenderEngine.EngineType.P2D
    }
);

...

// an H.map.Polygon object we prepared earlier
polygonObject.addEventListener("contextmenu", handleContextMenu)

...

function handleContextMenu(evt) {
    // Don't do anything if the map itself is right-clicked/long-pressed
    if (evt.target === map) {
        return;
    }

    if (evt.target instanceof H.map.Polygon) {
        // Polygon-specific context menu items
        evt.items.push(new H.util.ContextItem({ label: "ABC123" }));
        evt.items.push(H.util.ContextItem.SEPARATOR);
        evt.items.push(new H.util.ContextItem({ label: "Do something", callback: function () { doSomething(evt) } }));
    }
}

Это работает нормально, отображает контекстное меню, когда щелкают правой кнопкой мыши полигональный объект, и закрывает себя, если нажимается где-то еще на карте. Однако контекстное меню не закрывается, если пользователь щелкает или взаимодействует с другим элементом на странице за пределами карты.

Мне не удалось найти никакой документации о том, как добиться такого поведения, и пример, который использует HERE Maps, также не закрывает контекстное меню, если щелкнуть где-то за пределами карты. Есть ли способ закрыть контекстное меню на карте программно или автоматически, если происходит взаимодействие с другим элементом страницы?


javascript contextmenu here-api heremaps
person Hoppeduppeanut    schedule 27.04.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Это немного хакерски, но вы можете вручную удалить контекстное меню из DOM, найдя div с классом h_context_menu на странице и удалив его. Это может иметь некоторые непреднамеренные побочные эффекты с классом пользовательского интерфейса, но, похоже, работает нормально из моего краткого тестирования.

Использование JQuery:

$("div.h_context_menu").remove()

Использование ES6:

document.querySelector("div.h_context_menu").remove()

Использование ванильного JavaScript (совместимого с Internet Explorer):

var el = document.querySelector("div.h_context_menu");
el.parentNode.removeChild(el);
person Hoppeduppeanut    schedule 13.05.2021