如何在 Here Maps API for JavaScript 上实现类似 Google Maps 的滚动行为？答案

【问题标题】：How to achieve Google Maps-like scrolling behavior on Here Maps API for JavaScript?如何在 Here Maps API for JavaScript 上实现类似 Google Maps 的滚动行为？
【发布时间】：2019-08-05 08:50:15
【问题描述】：

我正在使用 Here's Maps API for JavaScript 并尝试在移动设备上实现类似于 Google Map 的 API 的滚动行为。

当我想通过触摸地图进行滚动时，不应该总是阻止滚动页面，只有在地图的拖动行为被禁用时。

我试过用从指针事件中提取的相应Y参数调用window.scroll()，但不如浏览器默认滚动流畅。

我应该如何使用drag 或其他针对地图的事件来滚动页面？

【问题讨论】：

您好，请您添加一些屏幕截图来显示您想要实现的目标。
这是屏幕记录：link。在这种情况下，通过调用this.behavior.isEnabled(H.mapevents.Behavior.DRAGGING) 禁用拖动。我想要实现的是在地图上滚动。

标签： javascript maps here-api

【解决方案1】：

这段代码应该适合你：

let mapevents = new mapsjs.mapevents.MapEvents(map),
    behavior = new mapsjs.mapevents.Behavior(mapevents);

let startY, endY = 0;
map.addEventListener('dragstart', function(evt) {
  if (evt.currentPointer.type == 'touch' && evt.pointers.length < 2) {
    startY = evt.currentPointer.viewportY;
    behavior.disable(H.mapevents.Behavior.DRAGGING);
  }
});

map.addEventListener('drag', function(evt) {
  if (evt.currentPointer.type == 'touch' && evt.pointers.length < 2) {
    endY = evt.currentPointer.viewportY;
    window.scrollBy(0, (startY - endY));
  }
});

map.addEventListener('dragend', function(evt) {
  behavior.enable(H.mapevents.Behavior.DRAGGING);
});

在dragstart 和drag 回调中，仅当指针类型为touch 且指针数量为1 时，滚动才被禁用。这使得可以在触摸设备上用两根手指缩放和平移地图，也可以使用台式机/笔记本电脑上的鼠标。

注意，behavior.isEnabled(feature) 方法不会禁用该功能。为此，您需要使用behavior.disable(opt_features) 请参阅https://developer.here.com/documentation/maps/topics_api/h-mapevents-behavior.html

【讨论】：

【解决方案2】：

您可以通过以下方式允许在地图上滚动：

在dragstart 上禁用地图的拖动行为并捕获 Y 坐标。
在dragend 上启用地图的拖动行为并捕获 Y 坐标。
按dragend 上开始和结束 Y 坐标的差值滚动页面。

var mapEvents = new H.mapevents.MapEvents(map);
var beh = new H.mapevents.Behavior(mapEvents);
var startY, endY = 0;
map.addEventListener("dragstart", function(evt) {
   startY = evt.currentPointer.viewportY;
   beh.disable(H.mapevents.Behavior.DRAGGING);
});

map.addEventListener("dragend", function(evt) {
   endY = evt.currentPointer.viewportY;
   window.scrollBy(0, (startY - endY));
   beh.enable(H.mapevents.Behavior.DRAGGING);
});

【讨论】：