is it possible to have the 4 zoom level feature with IE9 and IE10?

问题

Using IE7, when hovering or clicking on the Zoombar, 4 zoom levels appears: Street, Country, Suburb, and State. This features does not exist when I am using IE9 or IE10. My question is how can I have this feature with IE9 and IE10?

回答1:

The ZoomBar you are after is a legacy component which is only maintained on older browsers, modern browsers will automatically display the newer, smaller zoom component. Your only way to duplicate the older functionality here would be to create your own custom component through injecting a extra styled <DIV> element into the DOM.

Here is an example below combining the HERE Maps API with jQuery. Insert your app_id and app_code as necessary.

<!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>

The custom ZoomBar can be seen below:

You can add further CSS styles to the HTML as you see fit, for example:

 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);

where labels refers to:

will display additional labels. This would obviously be better left in a CSS stylesheet of course.

来源：https://stackoverflow.com/questions/19086514/is-it-possible-to-have-the-4-zoom-level-feature-with-ie9-and-ie10

标签

here-api