API-V3版诺基亚Here OverlayPanel

Question

Nokia-Here API-V3文档告诉我，可以在地图上创建和实现自定义的UI控件，如"按钮"、"元素"、"容器"等。。。我试过了，除了H.ui.base.OverlayPanel之外，任何东西都对我有效。我将创建一个由地图上的信息按钮触发的小信息面板。信息按钮不是问题所在。api告诉我，有一个方法（OverlayPanel.pointToControl（control））但这对我不起作用。有人能帮我吗？谢谢你的回答，对不起我的英语。。。

Answer 1

基本的UI系统没有很好的文档记录，但根据你想做的事情，你必须创建一个控件并将其添加到UI中

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