控制DistanceMeasurement，Overview和ContextMenu

Question

有人知道如何启用api 3.0中的下一个控件吗？

• DistanceMeasurement
• 概述
• ContextMenu

我已经查看了文档，但是我找不到启用该控件的类或方法。

感谢。

Answer 1

<强>概述

您可以根据API Playground中的同步两个地图示例添加简单的概述。只需使用<div>在第一个地图中添加新的map.getElement()，然后添加跟踪原始地图移动的mapviewchange事件。您可以根据需要更改CSS以使其更漂亮。

/**
 * 
 *  @param  {H.Map} map  A HERE Map instance within the application
 *  @param  {H.service.Platform} platform
 */

function synchronizeMaps(map, platform) {
   var that = this;
   var div = document.createElement('div');

    div.style.width = '30%';
    div.style.height = '30%';
    div.style.top = '70%';
    div.style.backgroundColor = 'grey';
    div.style.position = 'absolute';


    that.zoomOffset = -5;
    map.getElement().appendChild(div);

    map.addEventListener('mapviewchange',  function () {
      that.overviewMap.setCenter(map.getCenter());
      that.overviewMap.setZoom(map.getZoom() + zoomOffset);
    });


    var defaultLayers = platform.createDefaultLayers();
    that.overviewMap = new H.Map(div, defaultLayers.normal.map, {
      center: map.getCenter(),
      zoom: map.getZoom() + zoomOffset
    });

}

结果是这样的：

DistanceMeasurement和ContextMenu

这两个控件都依赖于使用鼠标右键单击。因此，它们不适用于平板电脑或手机。我想这就是组件未包含在3.0 API中的原因。我没有样板来重新创建 DistanceMeasurement 用例（这相当复杂），但是对于 ContextMenu 等价物，您可以使用tap事件并创建屏幕上显示<div>（再次使用map.getElement()） - 类似于：

map.addEventListener('tap', function (evt) {
     var div = document.createElement('div'); // or check if it already exists...

        div.style.width = '100px';
        div.style.height = '100px';
        div.style.backgroundColor = 'grey';
        div.style.position = 'absolute';
        div.style.left = evt.currentPointer.viewportX;
        div.style.top = evt.currentPointer.viewportY;

     map.getElement().appendChild(div);

  });

DistanceMeasurement 和 ContextMenu 的真正解决方案是删除它们并将您的UX更新为移动设备友好型。如果您不需要为移动设备或平板电脑进行设计，那么我会继续使用2.5.x API。