HERE Map UI JS - How to add custom buttons to the Map UI?

问题

I am trying to find guidance in the HERE JS documentation on how to add a custom button to the HERE JS 3.0 map UI we have.

The button is going to move the map to center on the customer's current location (we provide the location outside of HERE functionality and pass it in manually). However, this needs to be triggered by a button on the HERE map itself. But I can't figure out how to attach a button to the map (so far documentation is just about how to customize already existing UI buttons or how to add an info bubble):

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

Is this even possible? Help would be greatly appreciated!

回答1:

The class H.ui.UI should help you get where you want to reach, and specifically the method addControl (name, control). and using the HERE UI kit makes it easy to craft the UI element (i.e. button) they way you wanted too.

I have written the following piece of code to help you achieve what you are looking for (I assume)

    //#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

来源：https://stackoverflow.com/questions/58864755/here-map-ui-js-how-to-add-custom-buttons-to-the-map-ui

标签

here-api