Question

使用IE7，当悬停或点击Zoombar时，会出现4个缩放级别：街道，乡村，郊区和州。当我使用IE9或IE10时，此功能不存在。我的问题是如何在IE9和IE10中使用此功能？

Answer 1

您所使用的 ZoomBar 是仅在旧版浏览器上维护的旧版组件，现代浏览器将自动显示较新的较小缩放组件。在此处复制旧功能的唯一方法是通过在DOM中注入额外的样式＆lt; DIV＆gt; 元素来创建自己的自定义组件。

以下是将HERE Maps API与jQuery相结合的示例。根据需要插入app_id and app_code。

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9; IE=10" />
    <script type="text/javascript" charset="UTF-8" src="http://js.cit.api.here.com/se/2.5.3/jsl.js?with=all"></script>
    <script type="text/javascript" charset="UTF-8" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" charset="UTF-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" />
</head>
<body>
    <h1>Adding an Overlay to the map</h1>


    <div id="mapContainer" style="width:540px; height:334px;"></div>

<script id="example-code" data-categories="overlay" type="text/javascript" >

nokia.Settings.set("app_id", "YOUR APP ID"); 
nokia.Settings.set("app_code", "YOUR APP CODE");
// Use staging environment (remove the line for production environment)
nokia.Settings.set("serviceMode", "cit");

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

function HtmlControl (html, id) {
    nokia.maps.map.component.Component.call(this);
    this.init(html, id);
}

extend(HtmlControl,
        nokia.maps.map.component.Component);


HtmlControl.prototype.init = function (html, id) {
    that = this;
    that.id = id
    that.set("node",  document.createElement("div"));   
    that.node.innerHTML = html;
};

HtmlControl.prototype.getId = function() { 
    return "HtmlControl." + this.id;
};

HtmlControl.prototype.attach = function(map) {
    map.getUIContainer().appendChild(this.node);
};

HtmlControl.prototype.detach = function(display) {
    map.getUIContainer().removeChild(this.node);
};


// Get the DOM node to which we will append the map
var mapContainer = document.getElementById("mapContainer");
// Create a map inside the map container DOM node
var map = new nokia.maps.map.Display(mapContainer, {
    // initial center and zoom level of the map
    center: [52.51, 13.4],
    zoomLevel: 10
});

 htmlControl = new HtmlControl(
         "<div id='slider' style='left:4em;top:1em;width:10px;min-height:250px'/></div>", "Sidebar");
map.components.add(htmlControl);


setUpSlider();

function setUpSlider(){
    $( "#slider" ).slider({
    //  range: true,
        min: 0,
        max: 20,
        orientation: "vertical",

        value: 10,
        slide: function( event, ui ) {
            map.set("zoomLevel", ui.value);
        }
    });
    $( "#slider" ).slider( "value", 10 );
}

</script>
</body>
</html>

自定义 ZoomBar 如下所示：

Extended Zoom Bar

您可以根据需要向HTML添加更多CSS样式，例如：

 htmlControl = new HtmlControl(
 "<div style='position:absolute'>" +
    "<div id='slider' style='float:left;left:1em;top:1em;width:10px;min-height:200px;'></div> " +
    "<div style='left:5em;min-width:150px;;min-height:200px;float:left; background:url(labels.png) no-repeat'></div>" +
 + "</div>", "Sidebar");
map.components.add(htmlControl);

其中标签是指：

labels

将显示其他标签。显然，这当然会更好地保留在CSS样式表中。

是否可以使用IE9和IE10的4缩放级别功能？

1 个答案: