-1

IE7 を使用して、ズームバーにカーソルを合わせるかクリックすると、4 つのズーム レベル (Street、Country、Suburb、State) が表示されます。IE9 または IE10 を使用している場合、この機能は存在しません。私の質問は、IE9 と IE10 でこの機能を使用するにはどうすればよいですか?

4

1 に答える 1

1

あなたが求めているZoomBarは、古いブラウザーでのみ維持されるレガシー コンポーネントです。最新のブラウザーは、新しくて小さいズーム コンポーネントを自動的に表示します。ここで古い機能を複製する唯一の方法は、追加のスタイルの<DIV>要素を DOM に挿入して独自のカスタム コンポーネントを作成することです。

以下は、HERE Maps API と jQuery を組み合わせた例です。必要に応じてapp_id と 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を以下に示します。

拡張ズームバー

必要に応じて、さらに CSS スタイルを HTML に追加できます。次に例を示します。

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

ここで、ラベルは次を指します。

ラベル

追加のラベルが表示されます。もちろん、これは明らかに CSS スタイルシートに残したほうがよいでしょう。

于 2013-09-30T15:41:06.420 に答える