这里 API - 删除地图

Question

我正在开发一个通过 Geolocation-API 检索用户位置的应用程序。当用户单击按钮时，"HERE-API" 地图将被初始化，并且用户可以选择将标记拖到确切位置（如果尚未标记）。当他单击中止按钮时，我想 "destroy" 或删除整个地图，因为我不希望它一直显示在屏幕上。就在用户单击检索位置并显示地图的按钮时。

我对 Whosebug 和官方文档做了很多研究，但我还没有找到任何关于如何处理这个问题的信息。

谁能帮帮我。

$("#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

总结：

在页面的开头定义了一个 "mapInit" 变量，该变量设置为 false。现在，当用户通过单击 "Save Position" 或 "Abort" 关闭地图时，它只是淡出地图并将 "mapInit" 变量设置为 true。解决方法：单击 'addLocation' 按钮时，只需检查 "mapInit" 变量是否设置为 false。如果是这样，则会初始化新地图。否则我只是再次淡入地图。
另一种可能是当用户点击"Hide"按钮时移除DOM元素，反之亦然，也可以创建onAttach、Detach回调，请参考为此.. developer.here.com/documentation/maps/topics/best-practices.html

这里 API - 删除地图

Here API - Remove Map

javascript

here-api