這里 API - 刪除地圖

Question

我正在開發一個通過 Geolocation-API 檢索用戶位置的應用程序。 當用戶點擊一個按鈕時，一個“HERE-API”地圖被初始化，用戶可以選擇將一個標記拖到確切的位置（如果它還沒有）。 當他點擊中止按鈕時，我想“銷毀”或刪除整個地圖，因為我不希望它一直顯示在屏幕上。 就在用戶單擊檢索位置並顯示地圖的按鈕時。

我對 StackOverflow 和官方文檔做了很多研究，但我沒有找到任何關於如何解決這個問題的信息。

有人可以幫幫我嗎。

$("#addLocation").on('click', function()
{
    $("#mapContainer").fadeIn();

    function addDraggableMarker(map, behavior)
    {
        var svgMarkup = `<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"><g><title>background</title><rect fill="none" id="canvas_background" height="42" width="42" y="-1" x="-1"/></g><g><title>Layer 1</title><path stroke="null" fill="#046f47" id="svg_1" d="m20,0.701143a15.19595,15.19595 0 0 0 -15.19595,15.19595c0,10.257267 13.296457,21.844179 13.96128,22.338047l1.234671,1.063717l1.234671,-1.063717c0.664823,-0.493868 13.96128,-12.080781 13.96128,-22.338047a15.19595,15.19595 0 0 0 -15.19595,-15.19595zm0,22.793926a7.597975,7.597975 0 1 1 7.597975,-7.597975a7.597975,7.597975 0 0 1 -7.597975,7.597975z"/><circle stroke="null" fill="#046f47" id="svg_2" r="3.938806" cy="16.03728" cx="19.999999"/></g></svg>`;

        var icon = new H.map.Icon(svgMarkup);
        var coords = {
            lat: lat,
            lng: lng
        };
        var marker = new H.map.Marker(
            coords, {
                icon: icon
            }, {
                volatility: true
            }
        );

        // Ensure that the marker can receive drag events
        marker.draggable = true;
        map.addObject(marker);

        // disable the default draggability of the underlying map and calculate the offset between mouse and target's position when starting to drag a marker object:
        map.addEventListener('dragstart', function(ev) {
            var target = ev.target,
                pointer = ev.currentPointer;
            if (target instanceof H.map.Marker) {
                var targetPosition = map.geoToScreen(target.getGeometry());
                target['offset'] = new H.math.Point(pointer.viewportX - targetPosition.x, pointer.viewportY - targetPosition.y);
                behavior.disable();
            }
        }, false);

        // re-enable the default draggability of the underlying map when dragging has completed
        map.addEventListener('dragend', function(ev) {
            var target = ev.target;
            if (target instanceof H.map.Marker) {
                behavior.enable();
            }
        }, false);

        // Listen to the drag event and move the position of the marker as necessary
        map.addEventListener('drag', function(ev) {
            var target = ev.target,
                pointer = ev.currentPointer;
            if (target instanceof H.map.Marker) {
                target.setGeometry(map.screenToGeo(pointer.viewportX - target['offset'].x, pointer.viewportY - target['offset'].y));
            }
        }, false);
    }

    //Step 1: initialize communication with the platform
    var platform = new H.service.Platform({
        'apikey': 'MY-API-KEY'
    });

    var defaultLayers = platform.createDefaultLayers();

    //Step 2: initialize a map
    var map = new H.Map(document.getElementById('map'),
        defaultLayers.vector.normal.map, {
            center: {
                lat: lat,
                lng: lng
            },
            zoom: 16,
            pixelRatio: window.devicePixelRatio || 1
        });

    // add a resize listener to make sure that the map occupies the whole container
    window.addEventListener('resize', () => map.getViewPort().resize());

    //Step 3: make the map interactive - MapEvents enables the event system - Behavior implements default interactions for pan/zoom (also on mobile touch environments)
    var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

    // Step 4: Create the default UI:
    var ui = H.ui.UI.createDefault(map, defaultLayers, "de-DE");

    // Add the click event listener.
    addDraggableMarker(map, behavior);
});




$('#mapButtonAbort').on('click', function() {

  // Something like map.destroy()  

});

Answer 1

概括：

• 在頁面的開頭是一個定義為 false 的“mapInit”變量。 現在，當用戶通過單擊“保存位置”或“中止”關閉地圖時，它只需淡出地圖並將“mapInit”變量設置為 true。 解決方法：單擊“addLocation”按鈕時，只需檢查“mapInit”變量是否設置為 false。 如果是這樣，則初始化新地圖。 否則我只是再次淡入地圖。

• 另一種可能性是當用戶點擊“隱藏”按鈕時移除 DOM 元素，反之亦然，也可以創建 onAttach、Detach 回調，請參考... developer.here.com/documentation/maps/topics/最佳實踐.html