控件DistanceMeasurement，Overview和ContextMenu

Question

有沒有人知道如何啓用here api 3.0中的下一個控件？

• DistanceMeasurement
• 概述
• 文本菜單

我查看的文件，但我不能找到類或方法啓用控件。

謝謝。

Answer 1

概述

您可以添加基於API Playground的同步兩個地圖例如一個簡單的概述。只需在第一張地圖中使用map.getElement()添加一個新的<div>，並添加一個跟蹤原始地圖移動的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和文本菜單

這兩個控件依賴於使用右鍵單擊鼠標按鈕。因此他們不能在平板電腦或手機上工作。我想這是組件未被包含在3.0 API中的原因。我沒有樣板重新創建DistanceMeasurement使用情況下（這是相當複雜的），但對於一個文本菜單等同，你也許可以利用tap事件（再次使用map.getElement()）創建屏幕上<div> - 是這樣的：

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和真正的解決方案文本菜單是刪除它們，更新您的UX是移動的友好。如果您不需要設計移動設備或平板電腦，那麼我會繼續使用2.5.x API。