诺基亚在这里映射API [英] Nokia here maps api

问题描述

我在这里使用诺基亚地图. 我已经看到，如果地图在一个小div容器内，则地图上的控件按钮(切换按钮以显示/隐藏交通，切换按钮以显示/隐藏公共交通工具)消失. 有没有办法避免这种行为(例如，通过移动/调整控件大小)?

I'm using nokia here maps. I've seen that the controls button on the map(toggle button to show/hide traffic,toggle button to show/hide public transport) desappear if the map is inside a small div container. Is there a way to avoid this behaviour, (for example by moving/resizing the control)?

我已将标准示例代码用于带有组件的基本地图: https://developer.here.com/javascript-apis/enterprise-api-explorer

I've used the standard example code for a basic map with components: https://developer.here.com/javascript-apis/enterprise-api-explorer

，然后将地图放入div中，并根据屏幕宽度调整自身大小(这是我的JavaScript)

and put the map inside a div wich resizes itself according to the screen width (Here's my javascript)

<script>
    window.onload=window.onresize=function(){
    $("#bigMapContainerTraff").width($(window).width()-50);
    $("#bigMapContainerTraff").height($(window).height()-50);};
</script>

推荐答案

标准控件仅是- standard 控件，它们在灵活性方面不提供太多功能，但可提供跨应用程序的一致性.如果您想做其他事情，那么从头开始编写自定义组件会更好:

The standard controls are just that - standard controls that don't offer much in terms of flexibility, but provide consistency across applications. If you are looking to do something else, you would be much better off writing a custom component from scratch:

function extend(B, A) {
    function I() {}
    I.prototype = A.prototype;
    B.prototype = new I();
    B.prototype.constructor = B;
}

var myCustomComponentSimple = function (callback) {
    var myNode = document.createElement("div"); 
    this.callback = callback;   
    this.getId = function() { return "MySimpleCustomComponent"; };  
    this.attach = function(display) {

var myHTML = '<div  id="myCustomComponentButton" style="position: absolute; left: 5px; top: 5px;' +
          'background: #ccc; border: 1px solid #000; padding: 10px;" />';

        myNode.innerHTML = myHTML;

        display.getUIContainer().appendChild(myNode);
        if(!this.button) {
            this.button =  nokia.maps.dom.EventTarget(
                             document.getElementById(
                                     "myCustomComponentButton"));
        }

        this.button.addListener("click", this.callback);
    };
    this.detach = function(display) {
        display.getUIContainer().removeChild(myNode);
        this.button.removeListener("click", this.callback);
    };

    // Call the "super" constructor to initialize properties
    nokia.maps.map.component.Component.call(this);

};
extend(myCustomComponentSimple, 
            nokia.maps.map.component.Component);


var customControl = new myCustomComponentSimple(function(){ 
  alert("doSomething");

    });
    map.components.add(customControl);

简单控件将单个<DIV>注入到DOM中，并为click事件提供回调函数-由于您可以控制此元素的样式，因此可以根据需要放置或设置其样式.您可以按照

The simple control injects a single <DIV> into the DOM and provides a callback function for the click event - since you have control over the styling of this element you can place it or style it as you want. You can easily replicate the behavior of the buttons by adding a toggle for the state of the map as described here

这篇关于诺基亚在这里映射API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！