Javascript 此处使用此处映射映射3.1鼠标滚轮事件

Javascript 此处使用此处映射映射3.1鼠标滚轮事件,javascript,dom-events,here-api,heremaps,Javascript,Dom Events,Here Api,Heremaps,我已经实现了新版本的heremapsjavascript-API:3.1,我想禁用鼠标滚轮,但只有在滚动地图本身,而不是整个页面时才禁用鼠标滚轮 请参见下面的示例:。我仍然希望能够向下滚动页面,而我在地图上,所以我可以达到页脚的内容 /** *将地图移动到柏林上空显示 * *@param{H.Map}在应用程序中映射一个HERE映射实例 */ 函数moveMapToBerlin(映射){ 地图设置中心({lat:52.5159,lng:13.3777}); map.setZoom(14);

我已经实现了新版本的heremapsjavascript-API:3.1,我想禁用鼠标滚轮,但只有在滚动地图本身,而不是整个页面时才禁用鼠标滚轮

请参见下面的示例:。我仍然希望能够向下滚动页面,而我在地图上,所以我可以达到页脚的内容


/**
*将地图移动到柏林上空显示
*
*@param{H.Map}在应用程序中映射一个HERE映射实例
*/
函数moveMapToBerlin(映射){
地图设置中心({lat:52.5159,lng:13.3777});
map.setZoom(14);
}
/**
*样板图初始化代码从下面开始:
*/
//步骤1:初始化与平台的通信
//在您自己的代码中,将变量window.apikey替换为您自己的apikey
var平台=新的H.service.platform({
apikey:'somevalue'
});
var defaultLayers=platform.createDefaultLayers();
//步骤2:初始化地图-此地图以欧洲为中心
var map=new H.map(document.getElementById('map'),
defaultLayers.vector.normal.map{
中心:{lat:50,lng:5},
缩放:4,
pixelRatio:window.devicePixelRatio | | 1
});
//添加一个调整大小的侦听器,以确保贴图占据整个容器
addEventListener('resize',()=>map.getViewPort().resize());
//步骤3:使地图具有交互性
//MapEvents启用事件系统
//行为实现了平移/缩放的默认交互(也在移动触摸环境中)
var behavior=newh.mapevents.behavior(newh.mapevents.mapevents(map));
日志(行为);
禁用(H.mapevents.behavior.WHEELZOOM);
//创建默认的UI组件
var ui=H.ui.ui.createDefault(映射,默认层);
//现在根据需要使用地图。。。
window.onload=函数(){
moveMapToBerlin(地图);
}
#地图{
宽度:95%;
高度:450px;
背景:灰色;
}
#面板{
宽度:100%;
高度:400px;
}

在指定位置映射
window.ENV_变量=https://developer.here.com'
页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容

页脚内容


对,定义

禁用(H.mapevents.behavior.Feature.WHEEL\u缩放)

本应允许滚动整个页面,但目前该功能尚未实现

此功能(整个页面的滚动)稍后将在JS API for map中提供。

在等待API更新时,我们已经实现了一个

我们将一个不可见的元素添加到同一个容器中,然后添加贴图并定位它,使其完全覆盖贴图

<div class="map-container">
    <div id="map-fixer" style="position: absolute; background-color: transparent; width: 100%; height: 100%; z-index: 1000; display: none;"></div>
</div>
这意味着鼠标滚轮被我们的“备用元素”捕获,滚动正常发生。当滚动完成时,不可见元素将被删除,这意味着其他地图交互仍然有效


我们确实尝试过清理由HERE Maps添加的控制盘事件,但不可能对其获得可靠的句柄(如果没有相同的函数句柄,则删除事件侦听器是很棘手的)。我们还尝试将鼠标三角形应用于滚动位置,但这在不同的鼠标速度和方向下不起作用。最后一个实验是一个固定的覆盖,但它阻止了地图的其他功能被访问(单击、拖动、缩放)。这就是我们使用这种方法的原因。

您好,请知道您发布了一个专门为您提供的API密钥。您的情况如何
(function () {
    var scrolling = false;
    var scrollEnd = null;

    function heremapScrollEnd() {
        scrolling = false;
        window.clearTimeout(scrollEnd);
        document.getElementById('map-fixer').style.display = 'none';
    }

    window.onwheel = function() {
        if (scrolling) {
            window.clearTimeout(scrollEnd);
            window.setTimeout(heremapScrollEnd, 200);
            return;
        }
        scrolling = true;
        document.getElementById('map-fixer').style.display = 'block';
        window.setTimeout(heremapScrollEnd, 1000);
    }
})();