HERE Map UI JS-如何将自定义按钮添加到Map UI? [英] HERE Map UI JS - How to add custom buttons to the Map UI?

问题描述

我正在尝试在HERE JS文档中找到有关如何向我们拥有的HERE JS 3.0地图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.

该按钮将用于将地图移动到客户当前位置的中心(我们在HERE功能之外提供了该位置，并手动将其传递).但是，这需要通过HERE映射本身上的按钮来触发.但是我不知道如何在地图上附加按钮(到目前为止，文档只是关于如何自定义已经存在的UI按钮或如何添加信息提示框):

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!

推荐答案

类H.ui.UI应该可以帮助您到达要到达的位置，尤其是方法addControl(名称，控件).并使用HERE UI套件可以轻松按自己的方式来制作UI元素(即按钮).

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 < 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': '<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(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

这篇关于HERE Map UI JS-如何将自定义按钮添加到Map UI?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！