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

Question

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

当我想通过触摸地图滚动时，滚动页面不应该总是被阻止，除非地图的拖动行为被禁用.

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

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

Answer 1

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

在 dragstart 上禁用地图的拖动行为并捕获 Y 坐标。
在 dragend 上启用地图的拖动行为并捕获 Y 坐标。
在dragend.

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);
});

Answer 2

此代码应该适合您：

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

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

How to achieve Google Maps-like scrolling behavior on Here Maps API for JavaScript?

javascript

maps

here-api