HERE Map UI JS - 如何向 Map UI 添加自定义按钮？答案

【问题标题】：HERE Map UI JS - How to add custom buttons to the Map UI?HERE Map UI JS - 如何向 Map UI 添加自定义按钮？
【发布时间】：2019-11-14 19:53:08
【问题描述】：

我正在尝试在 HERE JS 文档中找到有关如何将自定义按钮添加到我们拥有的 HERE JS 3.0 地图 UI 的指南。

该按钮会将地图移动到客户当前位置的中心（我们在 HERE 功能之外提供位置并手动传递）。但是，这需要通过 HERE 地图本身的按钮来触发。但我不知道如何将按钮附加到地图（到目前为止，文档只是关于如何自定义现有的 UI 按钮或如何添加信息气泡）：

https://developer.here.com/documentation/maps/dev_guide/topics/map-controls.html

这甚至可能吗？非常感谢您的帮助！

【问题讨论】：

标签： here-api

【解决方案1】：

H.ui.UI 类应该可以帮助您到达您想要到达的地方，特别是方法 addControl (name, control)。并且使用 HERE UI 工具包可以轻松制作您想要的 UI 元素（即按钮）。

我编写了以下代码来帮助您实现您正在寻找的东西（我假设）

    //#region add new UI element

    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 &lt; arguments.length; i++) {
                args[i - 2] = arguments[i];
            }
            return parentCtor.prototype[methodName].apply(me, args);
        };
    };

    var customUI = 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': '&lt;svg class="H_icon H_icon" viewBox="0 0 25 25">' +
                '&lt;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" />' +
                '&lt;/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(customUI, H.ui.Control);

    customUI.prototype.onButtonClick = function (evt) {
        'use strict'; if (evt.currentTarget.getState() === 'down') {
            console.log('Hollla, I am the new custom UI element.');
        }
    };

    var WaliedCheetos_CustomUI = new customUI();
    ui.addControl('WaliedCheetos_CustomUI', WaliedCheetos_CustomUI);

    //#endregion

【讨论】：