无法到达此处 api 以显示 UI 个组件

Question

我正在尝试在经典的 ExtJs 框架中使用 here-api。使用 developer.here.com 中的“指定位置的地图”示例。问题：

只要指定了宽度和高度，地图就会出现，但不会显示用于调整大小的 +/-。
使用“fit”或“Anchor”（因此地图将填充该区域），地图不显示，+/- 大小调整完全关闭。

对需要进行哪些组合或更改有什么想法吗？我设置了一个 fiddle 示例。

提前致谢！戈登

Answer 1

您忘记了地图的样式文件API。我还修复了一些 ExtJs 代码并添加了包装面板调整大小。

html:

<!-- From https://Here.com - Here maps -->
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>

app.js

Ext.application({
    name: 'Fiddle',
    requires: [
        'app.HMapPanel'
    ],

    launch: function () {
        Ext.create({
            title: 'Here Test',
            xtype: 'panel',
            width: 500,
            height: 500,
            layout: 'fit',
            resizable: true,
            items: [{
                xtype: 'hmappanel',
            }],
            renderTo: Ext.getBody(),

        });
    }
});

HMapPanel.js

Ext.define('app.HMapPanel', {
    extend: 'Ext.Component',
    alias: 'widget.hmappanel',

    html: '<div id="mapid" style="height: 100%;"></div>',
    config: {
        /**
         * @cfg {String} API Key used to access mapping service
         */
        apikey: 'dfZE7tCiVWqIJWrnJxCUNBuNmSb_jtwmB8fUgy2J4MQ',
        /**
         * @cfg {Object} Reference to platform 
         */
        platform: null,
        /**
         * @cfg 
         */
        defaultLayers: null,
        /**
         * @cfg 
         */
        map: null,
        /**
         * @cfg 
         */
        behavior: null,
        /**
         * @cfg 
         */
        ui: null

    },

    initComponent: function () {
        this.on('afterrender', this.initMap, this);
        this.on('resize', this.resizeMap, this);
        this.callParent();
    },

    initMap: function () {
        var me = this;
        var mapWrapper = Ext.getElementById('mapid');

        //Step 1: initialize communication with the platform
        me.setPlatform(new H.service.Platform({
            apikey: me.getApikey()
        }));
        me.setDefaultLayers(me.getPlatform().createDefaultLayers());

        //Step 2: initialize a map - this map is centered over Europe
        me.setMap(new H.Map(mapWrapper,
                me.getDefaultLayers().vector.normal.map, {
                center: {lat: 50, lng: 5},
                zoom: 4,
                pixelRatio: window.devicePixelRatio || 1
            }
        ));
        
        //Step 3: make the map interactive
        // MapEvents enables the event system
        // Behavior implements default interactions for pan/zoom (also on mobile touch environments)
        me.setBehavior(new H.mapevents.Behavior(new H.mapevents.MapEvents(me.getMap())));

        // Create the default UI components
        me.setUi(H.ui.UI.createDefault(me.getMap(), me.getDefaultLayers()));

        me.getMap().setCenter({lat:52.5159, lng:13.3777});
        me.getMap().setZoom(14);
      
    },

    resizeMap: function() {
        this.getMap().getViewPort().resize();
    }
});

无法到达此处 api 以显示 UI 个组件

Unable to get here api to show UI components

extjs

here-api