Javascript 在这里，我如何添加一个新的UI按钮？

我有一个默认的交互式诺基亚地图v3地图设置，它在地图上的一组中有多个标记

我想添加一个按钮或其他ui元素到地图，可以按下，当它调用一个函数时，尽可能地放大组中的所有标记。但是，除了infobubble或地图的默认ui元素之外，我找不到任何添加新ui元素的示例代码，我不想要这些

我想要的是类似于pano按钮的东西，但在地图的左上角，单击该按钮时将调用我的setBounds函数来缩小以包含gorup中的所有标记

这是我当前地图的javascript代码

// VUE
var vue1 = new Vue({
  el: '#app',
  data: () => ({
      behavior: null,
      centerCoords: { lng: #centerLon#, lat: #centerLat# },
      defaultLayers: null,
      devices: null,
      markerGroup: null,
      map: null,
      platform: null,
      ui: null,
  }),
  created: function(){
    // Initialize the platform object:
    this.platform = new H.service.Platform({
      'app_id': 'AN ID WOULD GO HERE',
      'app_code': 'A CODE WOULD GO HERE'
    });

    this.defaultLayers = this.platform.createDefaultLayers();
  },
  mounted: function(){
    // Instantiate (and display) a map object:
    this.map = new H.Map(
      document.getElementById('mapContainer'),
      this.defaultLayers.satellite.traffic,
      {
          center: this.centerCoords,
          zoom: 15,
      }
    );

    // Make Map interactive
    // MapEvents enables the event system
    // Behavior implements default interactions for pan/zoom (also on mobile touch environments)
    this.behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(this.map));

    // Create the default UI Components
    this.ui = H.ui.UI.createDefault(this.map, this.defaultLayers, 'en-US');
    this.ui.setUnitSystem(H.ui.UnitSystem.IMPERIAL);

    this.setMarkers();
    setTimeout(this.setBounds, 250);
    setInterval(this.setMarkers, 1 * 60 * 1000);
  },
  computed:{
  },
  methods:{
      setBounds: function(){
          this.map.setViewBounds(this.markerGroup.getBounds());
      },
      setMarkers: function(){
          let self = this;
          // if already present remove markerGroup from map
          if(self.markerGroup){
              self.markerGroup.removeAll();
          }

          //get request
          $.get(
              '/api/v1/getMarkers',
              data => {
                  let zIndex = 1;
                  self.devices = data;

                  // create new marker group from get request.
                  self.markerGroup = new H.map.Group();

                  // add marker group to the map
                  self.map.addObject(self.markerGroup);

                  // add each marker to the marker group
                  self.devices.forEach((el, ind, arr) => {
                      self.addMarkerToGroup(
                          self.markerGroup,
                          {lat: el.latitude, lng: el.longitude},
                          '<div>' + el.serial + '</div>'
                      );
                  });

                  self.map.addEventListener('tap', evt => {
                      if(evt.target instanceof mapsjs.map.Marker){
                          // increase z-index of the marker that was tapped
                          evt.target.setZIndex(zIndex++);
                      }
                  });

                  self.markerGroup.addEventListener('tap', evt => {
                      let bubble = new H.ui.InfoBubble(evt.target.getPosition(), {
                          content: evt.target.getData()
                      });
                      self.ui.addBubble(bubble);
                  }, false);
              },
              'json'
          );
      },
      addMarkerToGroup: function(group, coordinate, html){
          let marker = new H.map.Marker(coordinate);
          marker.setData(html);
          group.addObject(marker);
      }
  }
});

//VUE
var vue1=新的Vue({
el:“#应用程序”，
数据：（）=>({
行为：null，
中心坐标：{lng:#centerLon#，lat:#centerLat#}，
defaultLayers:null，
设备：空，
markerGroup:null，
map:null，
平台：空，
ui:null，
}),
已创建：函数（）{
//初始化平台对象：
this.platform=新的H.service.platform({
'应用程序id'：'一个id会出现在这里'，
“应用程序代码”：“代码将在此处显示”
});
this.defaultLayers=this.platform.createDefaultLayers（）；
},
挂载：函数（）{
//实例化（并显示）地图对象：
this.map=新的H.map(
document.getElementById（'mapContainer'），
这是.defaultLayers.satellite.traffic，
{
中心：这个，中心坐标，
缩放：15，
}
);
//使地图具有交互性
//MapEvents启用事件系统
//行为实现了平移/缩放的默认交互（也在移动触摸环境中）
this.behavior=newh.mapevents.behavior（newh.mapevents.mapevents（this.map））；
//创建默认的UI组件
this.ui=H.ui.ui.createDefault（this.map，this.defaultLayers，'en-US'）；
this.ui.setUnitSystem（H.ui.UnitSystem.IMPERIAL）；
这是setMarkers（）；
setTimeout（this.setBounds，250）；
setInterval（此.setMarkers，1*60*1000）；
},
计算：{
},
方法：{
setBounds:function（）{
this.map.setViewBounds（this.markerGroup.getBounds（））；
},
setMarkers:function（）{
让自我=这个；
//如果已存在，请从地图中删除markerGroup
if（self.markerGroup）{
self.markerGroup.removeAll（）；
}
//获取请求
美元(
“/api/v1/getMarkers”，
数据=>{
设zIndex=1；
self.devices=数据；
//从get请求创建新的标记组。
self.markerGroup=new H.map.Group（）；
//将标记组添加到地图
self.map.addObject（self.markerGroup）；
//将每个标记添加到标记组
自我设备forEach（（el、ind、arr）=>{
self.addMarkerToGroup(
self.markerGroup，
{纬度：el.纬度，lng:el.经度}，
''+el.serial+''
);
});
self.map.addEventListener（'tap'，evt=>{
if（mapsjs.map.Marker的evt.target实例）{
//增加被轻敲的标记的z指数
setZIndex（zIndex++）；
}
});
self.markerGroup.addEventListener（'tap'，evt=>{
让bubble=newh.ui.InfoBubble（evt.target.getPosition（）{
内容：evt.target.getData（）
});
self.ui.addBubble（bubble）；
}，假）；
},
“json”
);
},
addMarkerToGroup:函数（组、坐标、html）{
设标记=新的H.map.marker（坐标）；
marker.setData（html）；
添加对象（标记）；
}
}
});

您可以试一试：

inherits = function(childCtor, parentCtor) {   function tempCtor() {}  tempCtor.prototype = parentCtor.prototype;   childCtor.superClass_ = parentCtor.prototype;   childCtor.prototype = new tempCtor();   childCtor.prototype.constructor = childCtor;   childCtor.base = function(me, methodName, var_args) {
    var args = new Array(arguments.length - 2);
    for (var i = 2; i < arguments.length; i++) {
      args[i - 2] = arguments[i];
    }
    return parentCtor.prototype[methodName].apply(me, args);   }; };

var ZoomTo = function(opt_options) {   'use strict';   var options = opt_options || {};

  H.ui.Control.call(this);   this.onButtonClick = this.onButtonClick.bind(this);

  // create a button element   this.increaseBtn_ = new H.ui.base.Button({
    'label': '<svg class="H_icon H_icon" viewBox="0 0 25 25">' +
      '<path d="M 18.5,11 H 14 V 6.5 c 0,-.8 -.7,-1.5 -1.5,-1.5 -.8,0 -1.5,.7 -1.5,1.5 V 11 H 6' +
      '.5 C 5.7,11 5,11.7 5,12.5 5,13.3 5.7,14 6.5,14 H 11 v 4.5 c 0,.8 .7,1.5 1.5,1.5 .8,0 1.5,' +
      '-.7 1.5,-1.5 V 14 h 4.5 C 19.3,14 20,13.3 20,12.5 20,11.7 19.3,11 18.5,11 z" />' +
      '</svg>',
    'onStateChange': this.onButtonClick   });

  //add the buttons as this control's children   this.addChild(this.increaseBtn_);

  this.setAlignment(options['alignment'] || 'top-right');

  this.options_ = options; }; inherits(ZoomTo, H.ui.Control);

ZoomTo.prototype.onButtonClick = function(evt) {   'use strict';   if (evt.currentTarget.getState() === 'down') {
    console.log('Zoom to the set of markers');   } };

var zoomTo = new ZoomTo(); ui.addControl('zoomToMarkers', zoomTo);

inherits=function（childCtor，parentCtor）{function temptor（）{}temptor.prototype=parentCtor.prototype；childCtor.superClass}=parentCtor.prototype；childCtor.prototype=new temptor（）；childCtor.prototype.constructor=childCtor；childCtor.base=function（me，methodName，var_args）{
var args=新数组（arguments.length-2）；
for（var i=2；i