Nokia API OverlayPanel in API-V3

Question

Nokia-Here API-V3文檔告訴我，可以在地圖上創建和實現自定義UI控件，如「按鈕」，「元素」，「容器」等。 我試過了，除了H.ui.base.OverlayPanel之外，任何東西都適用於我。 我將創建一個由地圖上的信息按鈕觸發的小信息面板。 信息按鈕不是問題。該api告訴我，有一種方法（OverlayPanel.pointToControl（控制）） 但是不適合我。有誰能夠幫助我？感謝您的答案和對不起我的英語...

Answer 1

基本的用戶界面系統沒有很好的記錄，但取決於你想要做什麼，你將不得不創建一個控制並將其添加到UI.I撥弄與它想出以下辦法做到這一點：

//Usual setup lines... 
 
var platform = new H.service.Platform({ 
 
    app_id: 'DemoAppId01082013GAL', 
 
    app_code: 'AJKnXv84fjrb0KIHawS0Tg', 
 
    useCIT: true 
 
}); 
 
var defaultLayers = platform.createDefaultLayers(); 
 
//Usual setup lines... 
 
var platform = new H.service.Platform({ 
 
    app_id: 'DemoAppId01082013GAL', 
 
    app_code: 'AJKnXv84fjrb0KIHawS0Tg', 
 
    useCIT: true 
 
}); 
 
var defaultLayers = platform.createDefaultLayers(); 
 
var map = new H.Map(document.getElementById('map'), defaultLayers.normal.map); 
 
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map)); 
 
var ui = H.ui.UI.createDefault(map, defaultLayers); 
 

 
//OK, so now we have a UI. 
 
//Next thing we'll need is a control 
 
var myCustomControl = new H.ui.Control(); 
 
//Also an overlay panel 
 
var myCustomPanel = new H.ui.base.OverlayPanel(); 
 
//When the panel is rendered, we add some stuff to it 
 
myCustomPanel.renderInternal = function(el, doc) { 
 
    el.innerHTML = "Oh, hi there!"; 
 
    el.style.color = "white"; 
 
}; 
 

 
//Also a button that opens the overlay panel on click 
 
// and closes on next click 
 
var myCustomButton = new H.ui.base.PushButton({ 
 
    label: "clickme!", 
 
    onStateChange: function(evt) { 
 
    //OK, button state changed... if it's currently down 
 
    if (myCustomButton.getState() == "down") { //or: H.ui.base.Button.State.DOWN) 
 
     //Make sure the panel is positioned right 
 
     myCustomPanel.pointToControl(myCustomControl); 
 
     //... and open 
 
     myCustomPanel.setState("open"); //or: H.ui.base.OverlayPanel.OPEN 
 
    } else { 
 
     //... or close when button is not down 
 
     myCustomPanel.setState("closed"); //or: H.ui.base.OverlayPanel.CLOSED 
 
    } 
 
    } 
 
}); 
 
//Add the button and the panel to the control 
 
myCustomControl.addChild(myCustomButton); 
 
myCustomControl.addChild(myCustomPanel); 
 
//Set the position of the control in the UI's layout 
 
myCustomControl.setAlignment("top-right"); 
 

 
//And tadaah 
 
ui.addControl("myCustomControl", myCustomControl);