我在这里使用诺基亚地图。 我已经看到地图上的控件按钮(显示/隐藏流量的切换按钮,显示/隐藏公共交通的切换按钮)如果地图位于一个小的div容器内,则会消失。 有没有办法避免这种行为(例如通过移动/调整控件的大小)?
我已经将标准示例代码用于包含组件的基本地图: https://developer.here.com/javascript-apis/enterprise-api-explorer
并将地图放在div中,根据屏幕宽度调整自己的大小(这是我的javascript)
<script>
window.onload=window.onresize=function(){
$("#bigMapContainerTraff").width($(window).width()-50);
$("#bigMapContainerTraff").height($(window).height()-50);};
</script>
答案 0 :(得分:1)
标准控件只是 - 标准控件,它们在灵活性方面提供的不多,但提供了跨应用程序的一致性。如果您想要做其他事情,那么从头开始编写自定义组件会更好:
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
事件提供回调函数 - 因为您可以控制此元素的样式,您可以将其放置或设置为您的样式想。您可以通过为地图状态添加切换来轻松复制按钮的行为,如here所述