-1

使用 IE7，当悬停或单击缩放栏时，会出现 4 个缩放级别：街道、国家、郊区和州。当我使用 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如下图所示：

扩展缩放栏

您可以根据需要向 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);

其中标签是指：

标签

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

于 2013-09-30T15:41:06.420 回答